简化JSON树

时间:2017-11-02 22:17:18

标签: jquery arrays json html-table

我有一个脚本,其JSON结果如下:

[
  [
    [
      "maturity_date",
      "12/19/2017"
    ],
    [
      "interest_rate",
      0.22
    ],
    [
      "interest_earned",
      264
    ],
    [
      "management_fee",
      5.28
    ],
    [
      "gross_earning",
      1464
    ],
    [
      "investor_net_commission",
      258.72
    ],
    [
      "investor_net_earning",
      1458.72
    ]
  ],
  [
    [
      "maturity_date",
      "01/30/2018"
    ],
    [
      "interest_rate",
      0.22
    ],
    [
      "interest_earned",
      320.92
    ],
    [
      "management_fee",
      6.42
    ],
    [
      "gross_earning",
      1779.64
    ],
    [
      "investor_net_commission",
      314.5
    ],
    [
      "investor_net_earning",
      1773.22
    ]
  ],
  [
    [
      "maturity_date",
      "03/13/2018"
    ],
    [
      "interest_rate",
      0.22
    ],
    [
      "interest_earned",
      390.11
    ],
    [
      "management_fee",
      7.8
    ],
    [
      "gross_earning",
      2163.33
    ],
    [
      "investor_net_commission",
      382.31
    ],
    [
      "investor_net_earning",
      2155.53
    ]
  ]
]  

我希望将结构简化为如下所示的简单结构,以便我可以将其显示在表中,并在将来存储在数据库表中。请注意下面的结构是最重要的,只使用一个数据集进行说明

[

    {"maturity_date":"12/19/2017","interest_rate":0.22,"interest_earned":264,"management_fee":5.28,"gross_earning":1464,"investor_earning":1458.72},
    {"maturity_date":"01/30/2018","interest_rate":0.22,"interest_earned":264,"management_fee":5.28,"gross_earning":1464,"investor_earning":1458.72},
    {"maturity_date":"03/13/2018","interest_rate":0.22,"interest_earned":264,"management_fee":5.28,"gross_earning":1464,"investor_earning":1458.72},
]

如果结构如上所述简化,那么我已经可以使用堆栈溢出代码来创建表格。

for (var i=0; i<results.length; i++){
                                tr = $('<tr/>');
                                tr.append("<td>" + results[i].maturity_date + "</td>" );
                                tr.append("<td>" + results[i].interest_rate + "</td>" );
                                tr.append("<td>" + results[i].interest_earned + "</td>" );
                                tr.append("<td>" + results[i].management_fee + "</td>" );
                                tr.append("<td>" + results[i].gross_earning + "</td>" );
                                tr.append("<td>" + results[i].investor_net_commission + "</td>" );
                                tr.append("<td>" + results[i].investor_net_earning + "</td>" );

                                $('#compound_interest_table tbody').append(tr);

                            }

问题:

  1. 我怎样才能将初始结构简化为我所表现出的理想结构

  2. 我觉得第一个JSON结构也可以在不简化的情况下使用。如果我的理论是正确的,那么我怎么能用它来修改表的Jquery脚本。

  3. 我知道这个问题有点类似于表格问题的JSON,但仔细阅读了它们,我似乎无法弄清楚最后一点,所以请帮忙。

3 个答案:

答案 0 :(得分:1)

&#13;
&#13;
var data = [
  [
    [
      "maturity_date",
      "12/19/2017"
    ],
    [
      "interest_rate",
      0.22
    ],
    [
      "interest_earned",
      264
    ],
    [
      "management_fee",
      5.28
    ],
    [
      "gross_earning",
      1464
    ],
    [
      "investor_net_commission",
      258.72
    ],
    [
      "investor_net_earning",
      1458.72
    ]
  ],
  [
    [
      "maturity_date",
      "01/30/2018"
    ],
    [
      "interest_rate",
      0.22
    ],
    [
      "interest_earned",
      320.92
    ],
    [
      "management_fee",
      6.42
    ],
    [
      "gross_earning",
      1779.64
    ],
    [
      "investor_net_commission",
      314.5
    ],
    [
      "investor_net_earning",
      1773.22
    ]
  ],
  [
    [
      "maturity_date",
      "03/13/2018"
    ],
    [
      "interest_rate",
      0.22
    ],
    [
      "interest_earned",
      390.11
    ],
    [
      "management_fee",
      7.8
    ],
    [
      "gross_earning",
      2163.33
    ],
    [
      "investor_net_commission",
      382.31
    ],
    [
      "investor_net_earning",
      2155.53
    ]
  ]
];

var newData = data.reduce(function(collection, element){
  var rowData = {}; //create a new empty row
  
  element.reduce(function(collection, element){
    //put the elements into the row
    rowData[element[0]] = element[1];
    return rowData;
  }, rowData);
  
  collection.push(rowData); //add the row to the results
  return collection;
}, []);

console.log(newData);
&#13;
&#13;
&#13;

答案 1 :(得分:1)

对于(1),您可以使用reducemap

function flatten(array) {
  return array.reduce((obj, v) => {
    obj[v[0]] = v[1];
    return obj;
  }, {});
}

const array = [[], [], [], []];

console.log(array.map(flatten));

答案 2 :(得分:1)

地图/缩小,其中list是您在帖子中提供的结构:

list.map(function (propList) {
  return propList.reduce(function (o, prop) {
    o[prop[0]] = prop[1];   
    return o;
  }, {});
});