现在的web开发普遍采用前后端分离的模式,数据是二者之间的桥梁。

前端需要某项数据时向后端发送请求,后端根据请求,返回数据库中的数据。但在大多数情况下,这些数据是扁平的,并不能直接拿来渲染页面,必须经过js处理成前端所需的数据结构。比如在最近开发的一个抽奖系统中,需要展示各个奖级的中奖名单,如下图所示:

中奖名单要求展示各奖级的中奖者头像和昵称。为了实现这个功能,就需要特定结构的数据。后端返回的中奖名单winner1的数据格式如下:

winner1: [
  {
    avatar: 'http://******90ibeY9c/0',
    nickname: '大海',
    awardLevel: '特等奖',
    ... // 省略其他字段,下同
  },
  {
    avatar: 'http://******90ibeY9c/0',
    nickname: '爱',
    awardLevel: '一等奖'
  },
  {
    avatar: 'http://******90ibeY9c/0',
    nickname: '奔跑',
    awardLevel: '一等奖'
  },
  {
    avatar: 'http://******90ibeY9c/0',
    nickname: 'js处理',
    awardLevel: '二等奖'
  },
  {
    avatar: 'http://******90ibeY9c/0',
    nickname: '扁平数据',
    awardLevel: '三等奖'
  }
]

我们需要按awardLevel分组,然后把属于某个分组(如一等奖)的中奖者(如“”“奔跑”)都加入到该分组的list数组中,才能得到我们需要的数据结构:

winner2: [
  {
    level: '特等奖',
    list: [
      {
        avatar: 'http://******90ibeY9c/0',
        nickname: '大海'
      }
    ]
  },
  {
    level: '一等奖',
    list: [
      {
        avatar: 'http://******90ibeY9c/0',
        nickname: '爱'
      },
      {
        avatar: 'http://******90ibeY9c/0',
        nickname: '奔跑'
      }
    ]
  },
  {
    level: '二等奖',
    list: [
      {
        avatar: 'http://******90ibeY9c/0',
        nickname: 'js处理'
      }
    ]
  },
  {
    level: '三等奖',
    list: [
      {
        avatar: 'http://******90ibeY9c/0',
        nickname: '扁平数据'
      }
    ]
  }
]

所以,我们需要一个能将winner1转换成winner2的方法:

let winner2 = this.formatWinner(winner1)

formatWinner的具体实现:

formatWinner (data) {
  if (!data.length) {
    return []
  }
  // 临时数组,用于存放分组依据:awardLevel
  let temp = []
  // 结果数据
  let winner = []
  // 遍历扁平数据
  for (let i = 0; i < data.length; i++) {
    if (temp.indexOf(data[i].awardLevel) === -1) {
      // 如果temp中不存在该awardLevel
      // 先构造内层数据(list: [])
      let list = []
      list.push({
        avatar: data[i].avatar,
        nickname: data[i].nickname
      })
      // 再构造外层数据{level: '', list: []}
      winner.push({
        level: data[i].awardLevel,
        list // 等同于 list: list
      })
      // 将该awardLevel放入temp数组里
      temp.push(data[i].awardLevel)
    } else {
      // 如果temp中存在该awardLevel
      for (let j = 0; j < winner.length; j++) {
        // 找出属于哪个分组(奖级)
        if (winner[j].level === data[i].awardLevel) {
          // 在目标分组(奖级)中push新的中奖者
          winner[j].list.push({
            avatar: data[i].avatar,
            nickname: data[i].nickname
          })
        }
      }
    }
  }
  return winner
}
0
分类: jsvue
浏览:600

0 条评论

发表评论

电子邮件地址不会被公开。

你必须允许浏览器启用JavaScript才能看到验证码

Scroll Up