V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
molvqingtai
V2EX  ›  程序员

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

  •  
  •   molvqingtai ·
    molvqingtai · 2019-03-29 02:07:52 +08:00 · 2777 次点击
    这是一个创建于 2066 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我有这么两段数据:

      // 插入时间
      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
        1
    molvqingtai  
    OP
       2019-03-29 02:15:36 +08:00 via Android
    写错了,输出最后一个是 parent3
    使用 JavaScript,尽量使用 ES6 不考虑兼容性
    麻烦大家了
    Yvette
        2
    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
        3
    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
        4
    reus  
       2019-03-29 08:29:54 +08:00
    for 循环都不会写吗?
    TomVista
        5
    TomVista  
       2019-03-29 08:52:19 +08:00   ❤️ 1
    for 遍历,么得取巧,没得感情
    dremy
        6
    dremy  
       2019-03-29 08:54:18 +08:00 via iPhone
    lodash 熟练的话应该不麻烦,纯函数式的写法一条语句能搞定
    Mutoo
        7
    Mutoo  
       2019-03-29 08:58:44 +08:00   ❤️ 1
    这里的主要疑点是 object to array 之后的顺序,其它的不难。
    https://gist.github.com/mutoo/5cb1b48359049c29fcac7563d8cf3200
    rockyou12
        8
    rockyou12  
       2019-03-29 09:22:49 +08:00
    antv 也有 dataset,可以比较方便做这些转换
    molvqingtai
        9
    molvqingtai  
    OP
       2019-03-29 09:36:58 +08:00
    相反,我是爬取 echarts
    molvqingtai
        10
    molvqingtai  
    OP
       2019-03-29 09:39:12 +08:00
    @davin 我是将 echarts 的数据爬下来做成表格
    molvqingtai
        11
    molvqingtai  
    OP
       2019-03-29 09:42:01 +08:00
    @Mutoo 对就是这个问题,ES6 提供对象有关的遍历方法,都不能保证顺序,但是搞几层 for 循环看着难受
    deepdark
        12
    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
        13
    deepdark  
       2019-03-29 09:59:27 +08:00
    第二步可以合在第一步里面
    Mutoo
        14
    Mutoo  
       2019-03-29 10:00:20 +08:00
    @molvqingtai 这是因为 Object 的底层实现是 HashMap 本身就是无序的。如果强调顺序,需要用 Array 或者自己用逻辑来保证。
    molvqingtai
        15
    molvqingtai  
    OP
       2019-03-29 10:06:45 +08:00
    @Mutoo 感谢大佬
    davin
        16
    davin  
       2019-03-29 10:18:04 +08:00
    原来你是爬 echarts,这么看来你爬的这个 echarts 数据格式做得不够好啊 [手动白眼]
    molvqingtai
        17
    molvqingtai  
    OP
       2019-03-29 10:31:50 +08:00
    @reus 不是不会写,我是希望有更优雅的方法实现
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2959 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:10 · PVG 08:10 · LAX 16:10 · JFK 19:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.