将数组内容按元素属性进行重新分组

产品经理说要为抽奖活动写一个查看中奖记录的页面,设计图是按日期分组渲染。

将后端返回的数据处理后格式为

let data = [
	{
		date:"2018年09月11日 星期三",
		giftname:"28积分",
		time:1536631380000
	},
	{
		date:"2018年09月11日 星期三",
		giftname:"iphoneX",
		time:1536631380000
	},
	{
		date:"2018年09月12日 星期四",
		giftname:"100元优惠券",
		time:1536631380000
	}
]

那么首先需要将其按照date日期进行分组,然后再将同一天内的中奖记录放进一个数组里。

let recordList = [
    {
        date: '2018年09月11日 星期三',
        items: [
            {
            	giftname:"iphoneX",
                time:1536631380000
            },
            {
                giftname:"iphoneX",
				time:1536631380000
            }
        ]
    },
    {
        date:"2018年09月12日 星期四",
        items: [ 
            {
                giftname:"100元优惠券",
				time:1536631380000
            } 
        ]
    }
]

方法一:

function mapGiftRecords(data) {
      return data.reduce((prev, current) => {
        let index = -1
        let arr = []
        prev.some((item, i) => {
          if (item.date === current.date) {
            index = i
            return true
          }
        })
        if (index > -1) {
          arr['giftname'] = current.giftname
          arr['time'] = current.time
          prev[index].records.push(arr)
        } else {
          arr['giftname'] = current.giftname
          arr['time'] = current.time
          prev.push({
            date: current.date,
            records: [arr]
          })
        }
        return prev
      }, [])
    }
let recordList = mapGiftRecord(data)
// console.log(recordList)

方法二:

const recordList = []
data.forEach(element => {
  const obj = {
    date: '',
    items: []
  }
  const item = {
    giftname: element.giftname,
    time: element.time
  }
  const record = recordList.find(item => item.date === element.date)
  if (record) {
    record.items.push(item)
  } else {
    obj.date = element.date
    obj.items.push(item)
    recordList.push(obj)
  }
})
// console.log(recordList)