Formatting data got from API to create a chart

Question

there! I am new to web development so I need some help!

I am trying to create an app in which you choose a stock name and the chart of its price changes will appear. I am using this api and ApexCharts to create the chart.

The problem is the chart doesn't seem to take my data, so the chart looks empty. What I am doing is:

After taking the data from the API, looks something like this:

"data": [
        {
            "open": 129.8,
            "high": 133.04,
            "low": 129.47,
            "close": 132.995,
            "volume": 106686703.0,
            "adj_high": 133.04,
            "adj_low": 129.47,
            "adj_close": 132.995,
            "adj_open": 129.8,
            "adj_volume": 106686703.0,
            "split_factor": 1.0,
            "dividend": 0.0,
            "symbol": "AAPL",
            "exchange": "XNAS",
            "date": "2021-04-09T00:00:00+0000"
            },
            [...]
    ]

Then I am trying to create an array of objects (I only need the date and the O,H,L,C values) that looks like this:

series: [{
              data: [{
                  x: new Date(1538778600000),
                  y: [6629.81, 6650.5, 6623.04, 6633.33]
                },
                {
                  x: new Date(1538780400000),
                  y: [6632.01, 6643.59, 6620, 6630.11]
                }
              ]
            }],

The function that I implemented to do this is:

function formatData(stockData, symbol) {
      options.title.text = symbol;
      let solution = [];
      var apiData = stockData.data;
      for (var entry in apiData) {
        let obj = {};
        obj.x = new Date(entry.date); //the x axis will be containing the date
        let price = [];
        price.push(entry.open);
        price.push(entry.high);
        price.push(entry.low);
        price.push(entry.close);
        obj.y = price; //the y axis will be containing the prices
        solution.push(obj);
      }
      options.series[0].data = solution.sort((a, b) => a.x - b.x); //put in series what we obtained
    }

The result I get after formatting my data:

options.series:  
        {data: Array(10)}
        data: Array(10)
        0:
        x: Invalid Date
        [[Prototype]]: Object
        y: Array(4)
        0: undefined
        1: undefined
        2: undefined
        3: undefined

Why do I get 'Invalid date' and 'undefined'? When I am trying to simply display the date in the console, it works fine, but in the array I created it says invalid...And that is why my chart is empty and doesn't show any value.

I appreciate all the help!

Answer 1

I think formatData function is a problem. Change this line for (var entry in apiData), replace in with of.

for (var entry of apiData) {

or use forEach to loop through array.