0

I am trying to map the property "fiveDays" but when I call it the console returns

TypeError: data.fiveDays is undefined

The standard way of calling the property would typically be data.FiveDays from what I understand.

Sample of the object:

{
  "symbol": "ACB",
  "price": "0.7001",
  "date": "2020-03-12",
  "fiveDays": [
    [
      "2020-03-12",
      {
        "1. open": "0.6801",
        "2. high": "0.7400",
        "3. low": "0.6300",
        "4. close": "0.7001",
        "5. volume": "41546525"
      }
    ],
    [
      "2020-03-11",
      {
        "1. open": "0.9620",
        "2. high": "0.9820",
        "3. low": "0.8500",
        "4. close": "0.8587",
        "5. volume": "21826334"
      }
    ],
    [
      "2020-03-10",
      {
        "1. open": "1.0300",
        "2. high": "1.0700",
        "3. low": "0.9600",
        "4. close": "0.9802",
        "5. volume": "22182204"
      }
    ],
    [
      "2020-03-09",
      {
        "1. open": "0.9601",
        "2. high": "1.0900",
        "3. low": "0.9000",
        "4. close": "0.9490",
        "5. volume": "27748756"
      }
    ],
    [
      "2020-03-06",
      {
        "1. open": "1.2800",
        "2. high": "1.2900",
        "3. low": "1.1300",
        "4. close": "1.1700",
        "5. volume": "24907729"
      }
    ]
  ]
}

The method I am using in main.js takes in the HTML element and the object which is created with the Stocks class. This is where I try to call data.fiveDays and have it iterate over the array elements and map them to a new object which will be displayed using a handlebars template.

Method:

const displayHistoricalData = (el, data) => {
        // modify data to contain an array of day objects
        let fiveDays = data.fiveDays.map(day => {
            let {'1. open': open, '2. high': high, '3. low': low, '4. close': close} = day[1];

            return {open, high, low, close, date: day[0]};
        });

        el.innerHTML = Handlebars.templates['stock-history']({history: fiveDays});
    };

Data comes from a document.queryselector statement that listens for a click event. 

 document
        .querySelector('.stock-display')
        .addEventListener('click', (evt) => {
            if (evt.target && evt.target.matches('button.btn-history')) {
                let symbolInput = document.querySelector('#symbol').value;
                displayHistoricalData(document.querySelector('.day-details'), new Stocks({symbol: symbolInput}));
                evt.preventDefault();
            }
        });

As you can see here the "data" in getHistoricalData comes from the Stocks class.

The question is how can I access the array that is inside the object so that I can destructure it?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
RJ_Hidson
  • 3
  • 2
  • how do you get `data` and where do you call `displayHistroicalData`? – Nick Parsons Mar 13 '20 at 05:28
  • displayHistoricalData looks like this: ``` document .querySelector('.stock-display') .addEventListener('click', (evt) => { if (evt.target && evt.target.matches('button.btn-history')) { let symbolInput = document.querySelector('#symbol').value; displayHistoricalData(document.querySelector('.day-details'), new Stocks({symbol: symbolInput})); evt.preventDefault(); } });``` and "Data" is passed from the Stocks class. – RJ_Hidson Mar 13 '20 at 05:30
  • Did you console the data and see ? – sathish1409 Mar 13 '20 at 05:59
  • Maybe this helps: [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/q/11922383/218196) – Felix Kling Mar 13 '20 at 08:07
  • @sathish1409 Yes, I did. In the console I there is no issue calling the properties of the object. It's when it's saved in main.js and I attempt to console.log() it, it will say that the object cannot be defined. I should mention as well that I am using node.js to transpile the code, not sure if that makes a difference. – RJ_Hidson Mar 14 '20 at 02:08
  • @FelixKling Thanks for this, I have been looking at it and have learned a few things about objects. :) – RJ_Hidson Mar 14 '20 at 02:09

0 Answers0