【问题标题】:Convert one javascript nested object data structure to nested arrays将一个 javascript 嵌套对象数据结构转换为嵌套数组
【发布时间】:2013-03-08 17:14:43
【问题描述】:

我正在尝试在 Javascript 对象文字中转换 JSON 字符串。我认为有一些循环是可能的,但我无法完成。目标结构如下图,“chartData”。

小提琴可以在这里找到:http://jsbin.com/ajemih/13/edit

这是 JSON 数据:

{
   "1b":{
      "allLoad":"130",
      "loadMovement":"111",
      "allMovement":"111"
   },
   "1a":{
      "allLoad":"910",
      "loadMovement":"671",
      "allMovement":"280"
   },
   "systemLoad":"963"
}

转换后应该是这样的:

chartData = [[['loadMovement', 111], 
              ['allMovement', 120], 
              ['allLoad', 130]], 
             [['Load+Move', 671], 
              ['allMovement', 280], 
              ['allLoad', 910]]];

【问题讨论】:

  • 你的问题没有意义。您的任何一个代码块中都没有 JSON 字符串。你只是问如何将第一个javascript数据结构转换为第二个数据结构?
  • 是的。我想在第二个中转换第一个数据结构。
  • @jfriend00 他的第一段在技术上是有效的 JSON。不过,他并没有在他的小提琴中那样使用它。
  • @mcknight 您将不得不更具体地说明您要在此处遵循的规则。您想忽略带有原始字符串键的值吗?只是忽略systemLoad?只需遍历 1 ? 形式的属性
  • 那么到目前为止,您尝试了什么?我在 jsbin 中找不到任何实际尝试过的代码。

标签: javascript jquery json object loops


【解决方案1】:

你可以这样做:

var chartData = []

for(var key in data) {        
    var properties = data[key];

    if(typeof properties === "object") {
       var array = [];

       for(var propKey in properties) {
           array.push([propKey, properties[propKey]])
       }

       chartData.push(array);
    }             
}

查看fiddle

【讨论】:

    【解决方案2】:

    我认为这可行:

    工作演示:http://jsfiddle.net/jfriend00/YmjDR/

    var data = {
       "1b":{
          "allLoad":"130",
          "loadMovement":"111",
          "allMovement":"111"
       },
       "1a":{
          "allLoad":"910",
          "loadMovement":"671",
          "allMovement":"280"
       },
       "systemLoad":"963"
    };
    
    var chartData = [];
    
    for (var i in data) {
        var item = data[i];
        var outer = [];
        // skip over items in the outer object that aren't nested objects themselves
        if (typeof item === "object") {
            for (var j in item) {
                var temp = [];
                temp.push(j);
                temp.push(item[j]);
                outer.push(temp);
            }
        }
        if (outer.length) {
            chartData.push(outer);
        }
    }
    

    【讨论】:

      【解决方案3】:

      您需要手动映射数据。这实际上是一项更加勤奋但常规的工作。

      var jsonData = 'your json string';
      
      Object.keys( jsonData ).map(function( key ) {
          if( typeof jsonData[ key ] === 'object' ) {
              return Object.keys( jsonData[ key ] ).sort(function( a, b ) {
                  return +jsonData[ key ][ a ] - +jsonData[ key ][ b ];
              }).map(function( name ) {
                  return [ name, jsonData[ key ][ name ] ];
              });
          }
      }).filter( Boolean );
      

      上面的代码将按照每个组的数值对每个组进行排序,然后以所需的样式映射一个新数组。由于.map() 可能在非对象元素上返回undefined 值,因此我们需要在之前或之后过滤掉这些值。

      http://jsfiddle.net/WjZB2/2/

      【讨论】:

      【解决方案4】:

      我有类似的问题。 我的目标是将字符串列表转换为http://ivantage.github.io/angular-ivh-treeview/的有效格式

      这是我的出发点:

      [
        "A\\A1\\Test1",
        "A\\A1\\Test2",
        "A\\A2\\Test3",
        "B\\Test4",
        "B\\Test5",
        "B\\B1\\Test6",
        "B\\B1\\Test7",
        "B\\B1\\Test8",
        "C\\C1\\C1a\\Test9",
        "C\\C1\\C1b\\Test10",
        "C\\C2\\C2a\\Test11",
        "C\\C2\\C2a\\Test12",
        "C\\C2\\C2a\\Test13",
        "C\\C3\\Test14",
        "C\\Test15",
        "C\\Test16"
      ]
      

      我需要以下格式:

      [
        {
          "label": "Selected Tests",
          "children": [
            {
              "label": "A",
              "children": [
                {
                  "label": "A1",
                  "children": [
                    {
                      "label": "Test1",
                      "value": true
                    },
                    {
                      "label": "Test2",
                      "value": true
                    }
                  ]
                },
                {
                  "label": "A2",
                  "children": [
                    {
                      "label": "Test3",
                      "value": true
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
      

      查看我的解决方案https://jsfiddle.net/ydt3gewn/

      【讨论】:

        猜你喜欢
        • 2018-03-10
        • 1970-01-01
        • 2021-07-27
        • 2022-12-18
        • 1970-01-01
        • 2015-03-26
        • 2019-01-31
        相关资源
        最近更新 更多