How to access nested array and objects in http response In angular

Question

I have a nested data structure containing objects and arrays. How can I extract the information, i.e. access specific or multiple values (or keys)?

{
  "data": [
    {
      "id": 2,
      "addEmployee": {
        "firstName": "Devansh"
      },
      "attendances": [
        {
          "id": 3,
          "checkIn": "2020-02-18T04:36:45.000Z",
          "checkOut": "2020-02-18T11:46:16.000Z",
          "totalHours": "7:9",
          "date": "2020-02-18",
          "status": "present",
          "createdAt": "2020-02-18T04:36:45.000Z",
          "updatedAt": "2020-02-18T11:46:16.000Z",
          "userId": 2
        }
      ]
    }
  ]
}

how could i access the firstName and attendances array value

Answer 1

You must be assigning the object to a variable like here I am assigning to val variable. You can access the properties as below. You can run the snippet here and see the output

let val =  {
  "data": [
    {
      "id": 2,
      "addEmployee": {
        "firstName": "Devansh"
      },
      "attendances": [
        {
          "id": 3,
          "checkIn": "2020-02-18T04:36:45.000Z",
          "checkOut": "2020-02-18T11:46:16.000Z",
          "totalHours": "7:9",
          "date": "2020-02-18",
          "status": "present",
          "createdAt": "2020-02-18T04:36:45.000Z",
          "updatedAt": "2020-02-18T11:46:16.000Z",
          "userId": 2
        }
      ]
    }
  ]
}

val.data.forEach(eachData => { 
  console.log('Employee Name ---> ',eachData.addEmployee.firstName);
  eachData.attendances.forEach(atten => {
    console.log('attendance Object -->',atten);
  })
});

Answer 2

Use loop instead of using it directly using index values.

let data =[
    {
        "id": 2,
        "addEmployee": {
            "firstName": "Devansh"
        },
        "attendances": [
            {
                "id": 3,
                "checkIn": "2020-02-18T04:36:45.000Z",
                "checkOut": "2020-02-18T11:46:16.000Z",
                "totalHours": "7:9",
                "date": "2020-02-18",
                "status": "present",
                "createdAt": "2020-02-18T04:36:45.000Z",
                "updatedAt": "2020-02-18T11:46:16.000Z",
                "userId": 2
            }
        ]
    },
    ];


data.forEach(eachData => { 
 console.log(eachData.addEmployee.firstName);
  eachData.attendances.forEach(atten => {console.log(atten);})
});

Answer 3

You can access the data array of the object, then, the item of the array by index and so on, like this:

let employee = myObject.data[0].addEmployee.firstName; // i suggest renaming the addEmployee attribute
let attendances = myObject.data[0].attendances[0]