Pushing nested properties into array of a JSON in Angular

Question

I have a JSON response like this:

    {
      "AD": {
        "name": "Andorra",
        "native": "Andorra",
        "phone": "376",
        "continent": "EU",
        "capital": "Andorra la Vella",
        "currency": "EUR",
        "languages": [
          "ca"
        ]
      },
      "AE": {
    "name": "United Arab Emirates",
    "native": "دولة الإمارات العربية المتحدة",
    "phone": "971",
    "continent": "AS",
    "capital": "Abu Dhabi",
    "currency": "AED",
    "languages": [
      "ar"
    ]
  },

And I want to iterate over the countries capitals, only. But as for now I can only get the key of the contry and i'm not being able to reach the nested properties. I'm using this code in my subscription:

subscribe(data=>{
        let cityProps=Object.keys(data);
        let cityList=[]
        for(let prop in cityProps){
          cityList.push(cityProps[prop]);

        }
        this.cities=cityList;
        console.log(cityList)

I understand that this logic will only give me an array of "AD","AE" and so on. But how can I get the names?

Pardeep Jain · Accepted Answer · 2019-10-21 09:16:02Z

1

You have to use it like this -

for(let prop in cityProps){
     cityList.push(cityProps[prop].name);
}

const a = {
      "AD": {
        "name": "Andorra",
        "native": "Andorra",
        "phone": "376",
        "continent": "EU",
        "capital": "Andorra la Vella",
        "currency": "EUR",
        "languages": [
          "ca"
        ]
      },
      "AE": {
    "name": "United Arab Emirates",
    "native": "دولة الإمارات العربية المتحدة",
    "phone": "971",
    "continent": "AS",
    "capital": "Abu Dhabi",
    "currency": "AED",
    "languages": [
      "ar"
    ]
  }}
  
 const b = [];
 for(let prop in a){
     b.push(a[prop].name);
}
 
 console.log(b);

edited Oct 21, 2019 at 9:16

answered Oct 21, 2019 at 9:11

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mellville Over a year ago

Ok, it works, but this only because I can modify my data structure; but what if I get this JSON from a remote server? That was my real issue

Pardeep Jain Over a year ago

then also it should work, no need to modify data structure, it works as per you posted code in the question.

Mellville Over a year ago

the problem is that I was still using object.keys with your updated answer...

Arup Nayak · Accepted Answer · 2019-10-21 09:39:11Z

0

var data = {
      "AD": {
        "name": "Andorra",
        "native": "Andorra",
        "phone": "376",
        "continent": "EU",
        "capital": "Andorra la Vella",
        "currency": "EUR",
        "languages": [
          "ca"
        ]
      },
      "AE": {
    "name": "United Arab Emirates",
    "native": "دولة الإمارات العربية المتحدة",
    "phone": "971",
    "continent": "AS",
    "capital": "Abu Dhabi",
    "currency": "AED",
    "languages": [
      "ar"
    ]
  }};

//this will return array of capitals
Object.values(data).map(e => e.capital);

answered Oct 21, 2019 at 9:39

Arup Nayak

659 bronze badges

2 Comments

Mellville Over a year ago

it's returning all the keys and values inside each country and it's not an array, but it's also a handy solution, thanks!

Arup Nayak Over a year ago

@Mellville Can you specify a sample response you are looking for?

Collectives™ on Stack Overflow

Pushing nested properties into array of a JSON in Angular

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related