如何遍历 javascript 中对象内的数组元素

Question

I have a graphData array and I would like to push the close price array values of this response data I got from finhub into the x key of the graphData and the timestamps into the y key of the graphData array.

so it would be like this: graphData[{x:timestamp, y:closing price}]

response data:

 [{…}]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) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

so the "t" is the timestamp and the c is the closing price

So essentially I want to have the x values of graphData to be the timestamp each stock and the y values of graphData to be the closing price of each stock so that I can graph it

This is the Line Graph I am using from 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>

); }

Any kind of help will be appreciated. I am sorry if I could not word the question properly. English is not my first language and if you need any additional information to understand me properly please ask

Answer 1

Say response is the response you have, which contains c with n elements and t with n elements too.

To get the result you want, you can do:

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