如何在javascript中迭代对象内的数组元素答案

【问题标题】：How to iterate over array elements inside objects in javascript如何在javascript中迭代对象内的数组元素
【发布时间】：2022-01-08 20:56:19
【问题描述】：

我有一个 graphData 数组，我想将从 finhub 获得的这个响应数据的收盘价数组值推入 graphData 的 x 键，并将时间戳推入 graphData 数组的 y 键。

所以应该是这样的：graphData[{x:timestamp, y:close price}]

响应数据：

 [{…}]0: {name: 'AMZN', c: Array(2061), h: Array(2061), l: Array(2061), o: Array(2061), …}c: (2061) [3514.605, 3513.325, 3513.64, 3514.11, 3515.21, 3517.26, 3520.43, 3519.41, 3519.1, 3517.11, 3514.25, 3513.325, 3513.55, 3513.21, 3512.87, 3510.65, 3511.34, 3510.22, 3511.505, 3513.91, 3516.6, 3517, 3516.65, 3516.02, 3513.76, 3512.04, 3511.46, 3510.3, 3509.66, 3508.88, 3507.7, 3507.43, 3506.82, 3510.93, 3509.935, 3511.11, 3512.35, 3512.71, 3511.45, 3511.47, 3509.29, …]l: (2061) [ …]s: "ok" t: (2061) [0, 1631027100, 1631027160, 1631027220, 1631027280, 1631027340, 1631027400, 1631027460, 1631027520, 1631027580, 1631027640, 1631027700, 1631027760, 1631027820, 1631027880, 1631027940, 1631028000, 1631028060, 1631028120, 1631028180, 1631028240, …]v: (2061) [ 5536, 10798, 4940, 7008, 3136, 3155, 3259, 4217, 1718, 3665, 1299, …][[Prototype]]: Object1: {name: 'RGC', c: Array(606), h: Array(606), l: Array(606), o: Array(606), …}2: {name: 'TOI', s: 'no_data'}3: {name: 'MSFT', c: Array(2531), h: Array(2531), l: Array(2531), o: Array(2531), …}4: {name: 'TSLA', c: Array(3053), h: Array(3053), l: Array(3053), o: Array(3053), …}5: {name: 'NIO', c: Array(3645), h: Array(3645), l: Array(3645), o: Array(3645), …}6: {name: 'AMC', c: Array(4152), h: Array(4152), l: Array(4152), o: Array(4152), …}length: 7[[Prototype]]: Array(0)

LineGraph.js:36 (2) [{…}, {…}]
LineGraph.js:36 (3) [{…}, {…}, {…}]
LineGraph.js:36 (4) [{…}, {…}, {…}, {…}]
LineGraph.js:36 (5) [{…}, {…}, {…}, {…}, {…}]
LineGraph.js:36 (6) [{…}, {…}, {…}, {…}, {…}, {…}]
LineGraph.js:36 (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

所以“t”是时间戳，c 是收盘价

所以本质上我想让 graphData 的 x 值作为每只股票的时间戳，并将 graphData 的 y 值作为每只股票的收盘价，以便我可以绘制它

这是我在 chartjs 中使用的折线图：

return (
<div className="linegraph">
  <Line
    data={{
      datasets: [
        {
          type: "line",
          backgroundColor: "black",
          borderColor: "#5AC53B",
          borderWidth: 2,
          pointBorderColor: "rgba(0, 0, 0, 0)",
          pointBackgroundColor: "rgba(0, 0, 0, 0)",
          pointHoverBackgroundColor: "#5AC53B",
          pointHoverBorderColor: "#000000",
          pointHoverBorderWidth: 4,
          pointHoverRadius: 6,
          data: graphData,
        },
      ],
    }}
    options={{
      maintainAspectRatio: false,
      legend: {
        display: false,
      },
      tooltips: {
        mode: "index",
        intersect: false,
      },
      scales: {
        yAxes: [
          {
            gridLines: {
              display: false,
            },
          },
        ],
      },
    }}
  />
</div>

); }

我们将不胜感激任何形式的帮助。如果我不能正确地表达这个问题，我很抱歉。英语不是我的第一语言，如果您需要任何其他信息来正确理解我，请询问

【问题讨论】：

标签： javascript arrays reactjs object chart.js

【解决方案1】：

说response 是您的响应，其中包含带有n 个元素的c 和带有n 个元素的t。

要得到你想要的结果，你可以这样做：

const data = response.t.reduce((acc, curr, i) => {
  acc.push({
    x: response.c[i],
    y: curr,
  });
  return acc;
}, []);

【讨论】：