js根据日期划分数组和显示

后台数据如下:0 : {PERSON: "郑", TYPE1: "A", TYPE2: "日A", DATE: "20190517"}1 : {PERSON: "林", TYPE1: "A", TYPE2: "夜A", DATE: "20190517"}2 : {PERSON: "郑", TYPE1: "A", TYPE2: "日B", DATE: "20190517"}3 : {PERSON: "林", TYPE1: "A", TYPE2: "夜B", DATE: "20190517"}4 : {PERSON: "田", TYPE1: "A", TYPE2: "日A", DATE: "20190518"}5 : {PERSON: "陈", TYPE1: "A", TYPE2: "夜A", DATE: "20190518"}6 : {PERSON: "王", TYPE1: "A", TYPE2: "日B", DATE: "20190518"}7 : {PERSON: "王", TYPE1: "A", TYPE2: "夜B", DATE: "20190518"}8 : {PERSON: "许", TYPE1: "A", TYPE2: "日A", DATE: "20190519"}9 : {PERSON: "王", TYPE1: "A", TYPE2: "夜A", DATE: "20190519"}10: {PERSON: "林", TYPE1: "A", TYPE2: "日B", DATE: "20190519"}11: {PERSON: "郭", TYPE1: "A", TYPE2: "夜B", DATE: "20190519"}12: {PERSON: "张", TYPE1: "A", TYPE2: "日A", DATE: "20190520"}13: {PERSON: "王", TYPE1: "A", TYPE2: "夜A", DATE: "20190520"}14: {PERSON: "苏", TYPE1: "A", TYPE2: "日B", DATE: "20190520"}15: {PERSON: "黄", TYPE1: "A", TYPE2: "夜B", DATE: "20190520"}16: {PERSON: "郑", TYPE1: "B", TYPE2: "日A", DATE: "20190517"}17: {PERSON: "林", TYPE1: "B", TYPE2: "夜A", DATE: "20190517"}18: {PERSON: "郑", TYPE1: "B", TYPE2: "日B", DATE: "20190517"}19: {PERSON: "林", TYPE1: "B", TYPE2: "夜B", DATE: "20190517"}20: {PERSON: "田", TYPE1: "B", TYPE2: "日A", DATE: "20190518"}21: {PERSON: "陈", TYPE1: "B", TYPE2: "夜A", DATE: "20190518"}22: {PERSON: "王", TYPE1: "B", TYPE2: "日B", DATE: "20190518"}23: {PERSON: "王", TYPE1: "B", TYPE2: "夜B", DATE: "20190518"}24: {PERSON: "许", TYPE1: "B", TYPE2: "日A", DATE: "20190519"}25: {PERSON: "王", TYPE1: "B", TYPE2: "夜A", DATE: "20190519"}26: {PERSON: "林", TYPE1: "B", TYPE2: "日B", DATE: "20190519"}27: {PERSON: "郭", TYPE1: "B", TYPE2: "夜B", DATE: "20190519"}28: {PERSON: "张", TYPE1: "B", TYPE2: "日A", DATE: "20190520"}29: {PERSON: "王", TYPE1: "B", TYPE2: "夜A", DATE: "20190520"}30: {PERSON: "苏", TYPE1: "B", TYPE2: "日B", DATE: "20190520"}31: {PERSON: "黄", TYPE1: "B", TYPE2: "夜B", DATE: "20190520"} 呈现页面如下:20190517  20190518    20190519    20190520 ....A                    A                   A                    A日A：郑       日A：郑       日A：郑      日A：郑日B：郑       日B：郑       日B：郑      日B：郑夜A：林       夜A：林       夜A：林      夜A：林夜B：林       夜B：林       夜B：林      夜B：林B                    B                    B                  B日A：郑       日A：郑       日A：郑     日A：郑日B：郑       日B：郑       日B：郑      日B：郑夜A：林       夜A：林       夜A：林      夜A：林夜B：林       夜B：林       夜B：林       夜B：林 不知道怎么写？？

解决方案 »

  1.   

    Map(), key=DATE, Value: { A: {DayA:, DayB:,NightA: NightB }, B:{DayA:, DayB:,NightA: NightB} }遍历全部的数据， 插入到这个map数组里面取
      

  2.   

    如果是我的话，我想我会这样操作，高手可能有其它办法：
    一、将后台数据转换成JS对象arr1；
    二、声明一个数组arr2，遍历arr1，将元素的DATE属性值与arr2的所有元素值进行对比，如果arr2中存在这个DATE属性值遍历下一个元素，否则将DATE值添加到arr2；
    三、嵌套两层遍历，外层遍历arr2，内层遍历arr1，当元素的DATE属性值==arr2的元素值时，填充数据，否则遍历下一个元素。
      

  3.   

    这布局你是用普通html写吗？
    如果是MVVM的前端框架，主要就考虑怎么绑定展示的问题了。
    如果是纯html，那就参照楼上几位的方式去遍历，再去添加dom到页面上。
      

  4.   

    是angular2+typescript