从未知数量的包含 JSON 对象的列表中提取元素答案

【问题标题】：Extract elements from unknown number of lists containing JSON objects从未知数量的包含 JSON 对象的列表中提取元素
【发布时间】：2021-04-12 12:07:31
【问题描述】：

我正在尝试制作将呈现从 API 获取的数据的图表组件。响应数据是一个包含 JSON 对象的等长数组。示例：

[[{ts:"2021-04-11 12:36:23", v:6}, {ts:"2021-04-11 12:38:23", v:8}, ...], [{ts:"2021-04-11 12:36:23", v:2}, {ts:"2021-04-11 12:38:23", v:7}, ...], ...]

一个列表中对象的时间戳将始终与其他列表中对象的时间戳相对应。

图表组件需要一个 n 元素数组的数组，其中包含一个 ts 值和 n 个其他值，其中 n 是响应数组的长度。如果响应数组的长度为 2，则结果列表应如下所示：

[["2021-04-11 12:36:23", 6, 8], ["2021-04-11 12:38:23", 2, 7], ...]

我的问题是提取这个数组。我试图解构响应数组以将它们转换为单独的变量，而这些变量又可以通过 foreach 进行迭代。我没能成功。

这是我目前的“解决方案”：

    response = [[{ts:"2021-04-11 12:36:23", v:6}, {ts:"2021-04-11 12:38:23", v:8}], [{ts:"2021-04-11 12:36:23", v:2}, {ts:"2021-04-11 12:38:23", v:7}]]
    response[0].map((e, i) => {
      const arr = [];
      date = new Date(e["ts"]);
      arr.push(date);
      arr.push(e["v"]);
      arr.push(response[1][i]["v"]);
      return arr
    ;})

这并没有考虑到响应数组的长度可能不是 2。

【问题讨论】：

标签： javascript arrays json

【解决方案1】：

尝试以下解决方案：

let output = [];
response = [[{ts:"2021-04-11 12:36:23", v:6}, {ts:"2021-04-11 12:38:23", v:8}], [{ts:"2021-04-11 12:36:23", v:2}, {ts:"2021-04-11 12:38:23", v:7}]]
for(let sset of response) {
  for(let item of sset) {
    if (typeof output[item.ts] !== 'undefined' && output[item.ts].length > 0) {
      output[item.ts].push(item.v);
    } else {
      output[item.ts] = [item.ts, item.v];
    }
  }
}
console.log(output)

【讨论】：

【解决方案2】：

我最终扩展了@sssurii 的答案。图表组件需要数据对象具有相同的维度，因此数组中填充了空字符串以进行补偿。

代码：

let output = [];
let temp = [];
let i = 1;
let dataLength = dataFetch.length;

for (let res of dataFetch) {
  for (let set of res) {
    let date = new Date(set.ts).toISOString();
    if (typeof temp[date] !== "undefined" && temp[date].length > 0) {
      temp[date].splice(i, 0, set.v);
    } else {
      temp[date] = new Array(dataLength + 1).fill("");
      temp[date][0] = date;
      temp[date].splice(i, 0, set.v);
    }
    output.push(temp[date]);
  }
  i += 1;

【讨论】：

【解决方案3】：

您可以映射数组数组，并映射这些数组中的每个元素。最后将它们简化为包含您所追求的日期的单个数组。

response = [
  [{
    ts: "2021-04-11 12:36:23",
    v: 6
  }, {
    ts: "2021-04-11 12:38:23",
    v: 8
  }],
  [{
    ts: "2021-04-11 12:36:23",
    v: 2
  }, {
    ts: "2021-04-11 12:38:23",
    v: 7
  }]
]
console.log(
  response.map(
    (l, _) => l.map(
      (e, i) => new Date(e["ts"])
    )
  )
)
console.log(
  response.map(
    (l, _) => l.map(
      (e, i) => new Date(e["ts"])
    )
  ).reduce((a, b) => a.concat(b))
)

【讨论】：