猿问
下载APP

账单列表如何将年份月份一样的排在一起

array:[{

                    "amount":5000,

                    "goodsInfo":"翡翠城租金",

                    "tradeTime":"2019-04-20"

                },

                {

                    "amount":1200,

                    "goodsInfo":"五联西苑租金",

                    "tradeTime":"2019-04-25"

                },

                {

                    "amount":200,

                    "goodsInfo":"爱与家宾馆",

                    "tradeTime":"2019-04-30"

                },

                {

                    "amount":3800,

                    "goodsInfo":"丁香花园",

                    "tradeTime":"2019-05-20"

                },

                {

                    "amount":2500,

                    "goodsInfo":"滨兴小区",

                    "tradeTime":"2019-05-28"

                },

                {

                    "amount":2800,

                    "goodsInfo":"滨苑小区",

                    "tradeTime":"2019-06-08"

                }]

我从后台拿到一组数据是如果这样的,我要怎么提取出年份月份一样的,将其排在一起变成像下面那个数组,后面有效果图


newArray:[

                    {

                        "tradeTime":[

                            {

                                "amount":5000,

                                "goodsInfo":"翡翠城租金",

                                "tradeTime":"2019-04-20"

                            },

                            {

                                "amount":1200,

                                "goodsInfo":"五联西苑租金",

                                "tradeTime":"2019-04-25"

                            },

                            {

                                "amount":200,

                                "goodsInfo":"爱与家宾馆",

                                "tradeTime":"2019-04-30"

                            }

                        ]

                    },

                    {

                        "tradeTime":[

                            {

                                "amount":3800,

                                "goodsInfo":"丁香花园",

                                "tradeTime":"2019-05-20"

                            },

                            {

                                "amount":2500,

                                "goodsInfo":"滨兴小区",

                                "tradeTime":"2019-05-28"

                            }

                        ]

                    },

                    {

                        "tradeTime":[

                            {

                                "amount":2800,

                                "goodsInfo":"滨苑小区",

                                "tradeTime":"2019-06-08"

                            }

                        ]

                    }

                ]

https://img.mukewang.com/5cf7f3510001562a12422208.jpg

qq_浅仓小星_0
浏览 231回答 3
3回答

橋本奈奈未

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.record {border: 1px solid #ccc;margin: 20px 0;}.record-header-time {display: block;line-height: 50px;background: lightblue;}.record-item {display: flex;height: 100px;align-items: center;border-bottom: 1px solid #ccc;}</style></head><body><div id="app"></div><script>var datas = [{"amount": 5000,"goodsInfo": "翡翠城租金","tradeTime": "2019-04-20"},{"amount": 100,"goodsInfo": "万象城租金","tradeTime": "2019-04-20"},{"amount": 200,"goodsInfo": "万里长城租金","tradeTime": "2019-04-20"},{"amount": 1200,"goodsInfo": "五联西苑租金","tradeTime": "2019-04-25"},{"amount": 1100,"goodsInfo": "新河苑租金","tradeTime": "2019-04-25"},{"amount": 200,"goodsInfo": "爱与家宾馆","tradeTime": "2019-04-30"},{"amount": 3800,"goodsInfo": "丁香花园","tradeTime": "2019-05-20"},{"amount": 2500,"goodsInfo": "滨兴小区","tradeTime": "2019-05-28"},{"amount": 2800,"goodsInfo": "滨苑小区","tradeTime": "2019-06-08"}];function appendItem(el,item){var $item = document.createElement('div');var $time = document.createElement('time');var $info = document.createElement('span');var $amount = document.createElement('span');$item.className = 'record-item';$time.className = 'record-item-time';$info.className = 'record-item-goods';$amount.className = 'record-item-amount';$time.textContent = item.tradeTime;$info.textContent = item.goodsInfo;$amount.textContent = item.amount;$item.appendChild($time);$item.appendChild($info);$item.appendChild($amount);el.appendChild($item);}function appendHeaderTime(el, time){var $time = document.createElement('time');$time.className = 'record-header-time';$time.textContent = time;el.appendChild($time);}var frag = document.createDocumentFragment();for(var i = 0;i<datas.length;i++) {var $wrapper = document.createElement('div');var v = datas[i];$wrapper.className = 'record';appendHeaderTime($wrapper, v.tradeTime);appendItem($wrapper, v);for(var j = i+1;j<datas.length;j++) {var o = datas[j];if(v.tradeTime === o.tradeTime) {appendItem($wrapper,o);continue;}i = j-1;break;}frag.appendChild($wrapper);}document.getElementById('app').appendChild(frag);</script></body></html>既然已经有人说了如何提取同时间数据,那我就不按题主要求来了,在不修改数据基础上实现题主所要求的目的。一般来说后端提供的数据虽然没有分时间给,但一般会按时间顺序给。所以这里假设时间是有序的,那么就可以循环去比较时间然后去做对应的DOM渲染。方法有很多,这里使用循环是一个比较容易理解和想到的方案。也可以采用递归去处理。关于代码没有美化问题,因为复制到编辑器就这样我就不换了,使用编辑器格式化一下即可。

pardon110

用数组原生reduce方法多值化一,结合对象属性分组,正则提取年月即可实现,代码如下// 按属性对object分组 function groupBy(objectArray,property) {    return objectArray.reduce(function(acc,obj){        var key = obj[property]        // 年月分组        if(property == 'tradeTime'){          key = key.replace(/(\d{4})\-(\d{2})-\d{1,2}/, '$1$2')        }        if(!acc[key]){          acc[key] = []        }        acc[key].push(obj)        return acc      }, {}) } // objectArray 为你后台传过来的有序对象数组 var grouped = groupBy(objectArray,'tradeTime') console.log(grouped){ '201904':    [ { amount: 5000, goodsInfo: '翡翠城租金', tradeTime: '2019-04-20' },      { amount: 1200, goodsInfo: '五联西苑租金', tradeTime: '2019-04-25' },      { amount: 200, goodsInfo: '爱与家宾馆', tradeTime: '2019-04-30' } ],   '201905':    [ { amount: 3800, goodsInfo: '丁香花园', tradeTime: '2019-05-20' },      { amount: 2500, goodsInfo: '滨兴小区', tradeTime: '2019-05-28' } ],   '201906':    [ { amount: 2800, goodsInfo: '滨苑小区', tradeTime: '2019-06-08' } ]  }

我乃张真人

格式改为这样吧:newArray:{    "2014-04":[                 {                        "amount":5000,                         "goodsInfo":"翡翠城租金",                        "tradeTime":"2019-04-20"                 },                 {                     "amount":1200,                      "goodsInfo":"五联西苑租金",                        "tradeTime":"2019-04-25"                 },                 {                        "amount":200,                         "goodsInfo":"爱与家宾馆",                           "tradeTime":"2019-04-30"                   }    ]}
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答