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调用之前先处理结果。

我认为异步回调的性质使您的任务更加困难。我建议使用异步/等待来简化逻辑。像这样：

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循环，请检查数据类型是否为数组并进行连接。

我希望这会有所帮助。

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

3 个答案: