求一个复杂 json 数据转换实现

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2057 天前的主题，其中的信息可能已经有所发展或是发生改变。

我有这么两段数据：

  // 插入时间
  const timeData = ['1:00','2:00','3:00','4:00','5:00':'6:00']

  // 源数据
  const sourceData={
    parent1:{
      child1:[1,2,3,4,5,6],
      child2:[11,22,33,44,55,66],
      child3:[111,222,333,444,555,666]
    },
    parent2:{
      child1:[10,20,30,40,50,60],
      child2:[110,220,330,440,550,660],
      child3:[1110,2220,3330,4440,5550,6660]
    },
    parent3:{
      child1:[101,202,303,404,505,606],
      child2:[1101,2202,3303,4404,5505,6606],
      child3:[11101,22202,33303,44404,55505,66606]
    }
  }

child 的 key 名和数组里面的数字随机，数组长度和时间数组一样 timeData.length === parent['child'].length

现在需要转换成如下格式的数据：

      // 输出数据
      const outputData = [
            // parent1
           {child1:{value:1}, child2:{value:11}, child3:{value:111}, time:{value:'1:00'}},
           {child1:{value:2}, child2:{value:22}, child3:{value:222}, time:{value:'2:00'}},
           {child1:{value:3}, child2:{value:33}, child3:{value:333}, time:{value:'3:00'}},
           {child1:{value:4}, child2:{value:44}, child3:{value:444}, time:{value:'4:00'}},
           {child1:{value:5}, child2:{value:55}, child3:{value:555}, time:{value:'5:00'}},
           {child1:{value:6}, child2:{value:66}, child3:{value:666}, time:{value:'6:00'}},

          // parent2
          {child1:{value:10}, child2:{value:110}, child3:{value:1110}, time:{value:'1:00'}},
          {child1:{value:20}, child2:{value:220}, child3:{value:2220}, time:{value:'2:00'}},
          {child1:{value:30}, child2:{value:330}, child3:{value:3330}, time:{value:'3:00'}},
          {child1:{value:40}, child2:{value:440}, child3:{value:4440}, time:{value:'4:00'}},
          {child1:{value:50}, child2:{value:550}, child3:{value:5550}, time:{value:'5:00'}},
          {child1:{value:60}, child2:{value:660}, child3:{value:6660}, time:{value:'6:00'}},

          // parent2
          {child1:{value:101}, child2:{value:1101}, child3:{value:11101}, time:{value:'1:00'},
          {child1:{value:202}, child2:{value:2202}, child3:{value:22202}, time:{value:'2:00'},
          {child1:{value:303}, child2:{value:3303}, child3:{value:33303}, time:{value:'3:00'},
          {child1:{value:404}, child2:{value:4404}, child3:{value:44404}, time:{value:'4:00'},
          {child1:{value:505}, child2:{value:5505}, child3:{value:55505}, time:{value:'5:00'},
          {child1:{value:606}, child2:{value:6606}, child3:{value:66606}, time:{value:'6:00'},

      ]

想了好久卡这儿了，希望有大佬能提供实现方法

17 条回复 • 2019-03-29 10:31:50 +08:00

molvqingtai

2019-03-29 02:15:36 +08:00 via Android

写错了，输出最后一个是 parent3
使用 JavaScript，尽量使用 ES6 不考虑兼容性
麻烦大家了

Yvette

2019-03-29 06:48:33 +08:00

第一个 for in loop 里得到 parent 和 child，然后每个循环里面，出第二个 loop in range(timeData.length)，读了 index 之后得到每个 child 和 timeData 的值，然后用得到的值 construct 一个新的对象 append 到 outputData

davin

2019-03-29 07:43:52 +08:00 via iPhone

楼主这是要做 echarts 图表么？它官方有 dataset 的配置项，你这个数据结构改一改应该就行了，手机发代码不方便。可参考 https://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE

reus

2019-03-29 08:29:54 +08:00

for 循环都不会写吗？

TomVista

2019-03-29 08:52:19 +08:00

for 遍历,么得取巧,没得感情

dremy

2019-03-29 08:54:18 +08:00 via iPhone

lodash 熟练的话应该不麻烦，纯函数式的写法一条语句能搞定

Mutoo

2019-03-29 08:58:44 +08:00

这里的主要疑点是 object to array 之后的顺序，其它的不难。
https://gist.github.com/mutoo/5cb1b48359049c29fcac7563d8cf3200

rockyou12

2019-03-29 09:22:49 +08:00

antv 也有 dataset，可以比较方便做这些转换

molvqingtai

2019-03-29 09:36:58 +08:00

相反，我是爬取 echarts

molvqingtai

2019-03-29 09:39:12 +08:00

@davin 我是将 echarts 的数据爬下来做成表格

molvqingtai

2019-03-29 09:42:01 +08:00

@Mutoo 对就是这个问题，ES6 提供对象有关的遍历方法，都不能保证顺序，但是搞几层 for 循环看着难受

deepdark

2019-03-29 09:57:01 +08:00

1.遍历 sourceData，根据下标转换成 sourceDataList [[1,11,111,"1:00"],[2,22,222,"2:00"]....]
2.遍历 sourceDataList 用 lodash。outputData.push(_.zipObjectDeep(['child1.value', 'child2.value','child3.value','time.value'], sourceDataList[i])) 循环插入 outputData

deepdark

2019-03-29 09:59:27 +08:00

第二步可以合在第一步里面

Mutoo

2019-03-29 10:00:20 +08:00

@molvqingtai 这是因为 Object 的底层实现是 HashMap 本身就是无序的。如果强调顺序，需要用 Array 或者自己用逻辑来保证。

molvqingtai

2019-03-29 10:06:45 +08:00

@Mutoo 感谢大佬

davin

2019-03-29 10:18:04 +08:00

原来你是爬 echarts，这么看来你爬的这个 echarts 数据格式做得不够好啊 [手动白眼]

molvqingtai

2019-03-29 10:31:50 +08:00

@reus 不是不会写，我是希望有更优雅的方法实现