How to access the object from an Array in Type script

Question

I have a list of objects in an array like this:

    [
      0: {name: "John", data: 0: [{age: 24}, {icon: "04d"}]},
      1: {name: "Vicky",data: 0: [{age: 25}, {icon: "06d"}]},
      2: {name: "John2",data: 0: [{age: 26}, {icon: "05d"}]},
      4: {name: "John3",data: 0: [{age: 27}, {icon: "09d"}]},
    ]

I am trying to access the objects like this.

    *ngFor="let weather_data of weather_data_info" 

in my HTML but I can not access the elements like above, can anyone tell me what I am doing wrong, any other alternate method is also welcome

Answer 1

You need to convert your associative array to array since JS does not have such a type.

And also your inner data is not valid too

data: 0: [{age: 24}, {icon: "04d"}]
// This is not a valid structure

You need to remove keys from array:

const weather_data_info = [
              {name: "John", data: {0: [{age: 24}, {icon: "04d"}]}},
              {name: "Vicky",data: {0: [{age: 25}, {icon: "06d"}]}},
              {name: "John2",data: {0: [{age: 26}, {icon: "05d"}]}},
              {name: "John3",data: {0: [{age: 27}, {icon: "09d"}]}},
];

Or if you want to use index keys as ID, you can convert it to object and use Object.values() or Object.keys() to iterate over it:

const data = {
          0: {name: "John", data: {0: [{age: 24}, {icon: "04d"}]}},
          1: {name: "Vicky",data: {0: [{age: 25}, {icon: "06d"}]}},
          2: {name: "John2",data: {0: [{age: 26}, {icon: "05d"}]}},
          4: {name: "John3",data: {0: [{age: 27}, {icon: "09d"}]}},
};
const weather_data_info = Object.keys(data).reduce((acc, key) => {
    acc.push({...data[key], id: key});
    return acc;
},[]);

console.log(weather_data_info)