如何在JavaScript中连接两个结构相同的JSON数据集？

Question

我有以下代码调用两个不同的API，解析JSON数据并将其显示在网页上。 两个JSON数据集都具有相同的结构，一个具有5列，另一个具有20列。

我正在使用的JavaScript代码如下所示。 如何将两个JSON数据集合并为一个，因此有一个包含25列的结果数据集，使我能够搜索/引用所有这25列？

两个JSON数据集的数据结构如下：

 { "datatable": { "data": [ [ "TSLA", "2019-02-22", "2019-02-22", 58995.9, -231.2 ] ], "columns": [ { "name": "ticker", "type": "String" }, { "name": "date", "type": "Date" }, { "name": "lastupdated", "type": "Date" }, { "name": "ev", "type": "BigDecimal(15,3)" }, { "name": "evebit", "type": "BigDecimal(15,3)" } ] }, "meta": { "next_cursor_id": null } } 

JavaScript代码如下：

 var apiurls = [ 'api1.json', 'api2.json' ], elroot = document.getElementById('root'), index = 0; function setup() { loadJSON(apiurls[index], gotData); } function gotData(data) { var daten = data.datatable.data[0], spalten = data.datatable.columns, output = ''; for (var i = 0; i < spalten.length; i++) { output = '<p>' + spalten[i].name + ': ' + daten[i] + '</p>'; elroot.innerHTML += output; } if (++index < apiurls.length) { setup(); } } 

Answer 1

这样的事情？

 var Json_1 = { "datatable": { "data" : ['aa','bb','cc'], "columns": ['x','y','z'] }, "meta": { 'meta1': 15, 'meta2':87 } }, Json_2 = { "datatable": { "data" : ['ZZbb','cZc'], "columns": ['xf','yf','zf','zgg'] }, "meta": { 'meta1': 879, 'meta2':4 } }, Json_cumul_typ0 = { Json_1, Json_2 }, Json_cumul_typ1 = { "data" : [].concat( Json_1.datatable.data, Json_2.datatable.data ), "columns": [].concat( Json_1.datatable.columns, Json_2.datatable.columns ), } ; console.log( Json_cumul_typ0 ); console.log( Json_cumul_typ1 ); 

Answer 2

首先进行所有API调用会更容易，在进行任何处理之前将它们组合到单个结果对象中。 目前，您正在进行API调用，然后在进行下一次API调用之前处理结果。

我认为异步回调的本质是让你的任务更加困难。 我建议使用async / await来简化逻辑。 像这样的东西：

var apiurls = [
    'api1.json',
    'api2.json'
  ],
  elroot = document.getElementById('root');

// Combine all API responses into this object
allResults = {
  data: [[]],
  columns: []
};


// loadJSON() is probably not async, so here is an async version using fetch()
async function loadJSON(url) {
  response = await fetch(url);
  return response.json()
}

// Wrap logic in async function so await can be used
(async () => {
    // First make all the API calls
    for (url of apiurls) {
        results = await loadJSON(url);
        allResults.data[0] = allResults.data[0].concat(results.datatable.data[0]);
        allResults.columns = allResults.columns.concat(results.datatable.columns);
    }

    // Then process combined allResults object here once.
    var daten = allResults.data[0],
        spalten = allResults.columns,
        output = '';

    for (var i = 0; i < spalten.length; i++) {
        output = '<p>' + spalten[i].name + ': ' + daten[i] + '</p>';
        elroot.innerHTML += output;
    }
})();

您正在使用的loadJSON()可能不是异步的。 以下是您可以使用的一些替代方案：

• 取（）
• 爱可信

Answer 3

var object1 = {
    "datatable": {
        "data": [],
        "columns": [1,2,3,4]
    },
    "meta": {}
}
var object2 = {
    "datatable": {
        "data": [],
        "columns": [6,7,8,9,0,11,12,123]
    },
    "meta": {}
}

现在要连接列字段。 所以你可以做的就是创建上述其中一个的深层副本。 有比下面提到的更好的方法。

var object3 = JSON.parse(JSON.stringify(object1));

现在连接列做到这一点，

object3.datatable.columns = object3.datatable.columns.concatenate(object2.datatable.columns);

如果要连接多个字段，可以在对象上使用for循环，检查数据类型是否为数组并进行连接。

我希望这有帮助。