关注前端 | 前端博客
当前位置: JavaScript > 关于后端数据前端重组

关于后端数据前端重组

2018-12-29 分类:JavaScript 作者:管理员 阅读(143)

后端返回的数据有时候不是你想要的样子,于是就得前端自己去重新组装

后端返回数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var list=[{
        "key": "颜色",
        "value": "(男)黑/蓝",
      },
      {
        "key": "颜色",
        "value": "(男)白/蓝",
      },
      {
        "key": "颜色",
        "value": "灰/兰",
      },
      {
        "key": "颜色",
        "value": "黑/白",
      },
      {
        "key": "颜色",
        "value": "灰/黄",
      },
      {
        "key": "颜色",
        "value": "白/粉",
      },
      {
        "key": "尺码",
        "value": "S",
      },
      {
        "key": "尺码",
        "value": "M",
      },
      {
        "key": "尺码",
        "value": "L",
      },
      {
        "key": "尺码",
        "value": "XL",
      },
      {
        "key": "尺码",
        "value": "2XL",
      },
       {
        "key": "色彩",
        "value": "黑色",
      },
       {
        "key": "色彩",
        "value": "白白",
      }]

需要组装成的数据结构

1
2
3
4
5
[
{key:'颜色',value:["(男)黑/蓝", "(男)白/蓝", "灰/兰", "黑/白", "灰/黄", "白/粉"]},
{key:'尺码',value:["S", "M", "L", "XL", "2XL"]},
{key:'色彩',value:["黑色", "白白"]}
]

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function formatData(arr){
  //获取key
  var keys=[];
  for(let i=0;i<arr.length;i++){
    keys.push(arr[i].key)
  }
  keys=[...new Set(keys)];
  //声明一个结果变量
  var res=[];
  //保存数组的长度
  var len=arr.length;

  for(var i=0;i<keys.length;i++){
    var key=keys[i];
    res.push({key:key,value:[]})
    for(var j=0;j<len;j++){
      if(list[j].key==key){
        res[i].value.push(list[j].value)
      }
    }
  }
  return res
}

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
1

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - 关于后端数据前端重组

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线