how to display an array of object from an API for it to display

Question

hello guys am using an api call Open AQ platfrom in my project.
HTTP/1.1 200 OK

 "results": [
  {
    "location": "Punjabi Bagh",
    "city": "Delhi",
    "country": "IN",
    "measurements": [
      {
        "parameter": "so2",
        "value": "7.8",
        "lastUpdated": "2015-07-24T11:30:00.000Z",
        "unit": "µg/m3",
        "sourceName": "Punjabi Bagh",
        "averagingPeriod": {
          "unit": "hours",
          "value": 0.25
        }
       },
       {
         "parameter": "co",
         "value": 1.3,
         "lastUpdated": "2015-08-18T23:30:00.000Z",
         "unit": "mg/m3",
         "sourceName": "CPCB",
         "averagingPeriod": {
           "unit": "hours",
           "value": 0.25
         }
       },
       {
         "parameter": "pm25",
         "value": 79,
         "lastUpdated": "2015-10-02T21:45:00.000Z",
         "unit": "µg/m3",
         "sourceName": "CPCB",
         "averagingPeriod": {
           "unit": "hours",
           "value": 0.25
         }
       }
     ]
       ...
   }
]

in my app it will render the following:

"location": "Punjabi Bagh",
    "city": "Delhi",
    "country": "IN",

but wont render sourceName or averagingPeriod from the api, it will only render undefined how should i solve this problem.

Answer 1

It looks like "sourceName" and "averagingPeriod" are nested in "measurements" which is an array.

Try:

measurements[0].sourceName
measurements[0].averagingPeriod

measurements[1].sourceName
measurements[1].averagingPeriod

Depending on what you need, you can get them with a map:

measurements.map(item => item.sourceName)