87,907
社区成员
发帖
与我相关
我的任务
分享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：林
不知道怎么写？？
...全文
请发表友善的回复…
发表回复
大果子你说谁呢 2019-05-23
- 打赏
- 举报
是angular2+typescript
Dr立 2019-05-23
- 打赏
- 举报
这布局你是用普通html写吗？
如果是MVVM的前端框架，主要就考虑怎么绑定展示的问题了。
如果是纯html，那就参照楼上几位的方式去遍历，再去添加dom到页面上。
winzond 2019-05-23
- 打赏
- 举报
如果是我的话，我想我会这样操作，高手可能有其它办法：
一、将后台数据转换成JS对象arr1；
二、声明一个数组arr2，遍历arr1，将元素的DATE属性值与arr2的所有元素值进行对比，如果arr2中存在这个DATE属性值遍历下一个元素，否则将DATE值添加到arr2；
三、嵌套两层遍历，外层遍历arr2，内层遍历arr1，当元素的DATE属性值==arr2的元素值时，填充数据，否则遍历下一个元素。
一、将后台数据转换成JS对象arr1；
二、声明一个数组arr2，遍历arr1，将元素的DATE属性值与arr2的所有元素值进行对比，如果arr2中存在这个DATE属性值遍历下一个元素，否则将DATE值添加到arr2；
三、嵌套两层遍历，外层遍历arr2，内层遍历arr1，当元素的DATE属性值==arr2的元素值时，填充数据，否则遍历下一个元素。
HQChart 2019-05-23
- 打赏
- 举报
Map(), key=DATE, Value: { A: {DayA:, DayB:,NightA: NightB }, B:{DayA:, DayB:,NightA: NightB} }
遍历全部的数据， 插入到这个map数组里面取
