How do I iterate over a nested JSON object

Question

I have a JSON object. Within this object I have an Object array named 'languages' and in this array there are upwards of 1 languages object listed.

How would I construct a forEach loop to access the 'name' of each 'language' Object?

Example of what the PHP cURL routine outputs:

languages: Array(4)
0: {iso639_1: "en", iso639_2: "eng", name: "English", nativeName: "English"}
1: {iso639_1: "fj", iso639_2: "fij", name: "Fijian", nativeName: "vosa Vakaviti"}
2: {iso639_1: "hi", iso639_2: "hin", name: "Hindi", nativeName: "हिन्दी"}
3: {iso639_1: "ur", iso639_2: "urd", name: "Urdu", nativeName: "اردو"}
length: 4

This is how the data is used in a popup rendered dynamically via js:

var popupCreateLanguagesResultTD = document.createElement("div");
popupCreateLanguagesResultTD.className = "col";
popupCreateLanguagesResultTD.innerText = result["languages"];

What I want it to look like: Languages Spoken: English, Fijian, Hindi, Urdu.

Example of JSON file structure:

{
  "name": "Canada",
  "topLevelDomain": [
    ".ca"
  ],
  "alpha2Code": "CA",
  "alpha3Code": "CAN",
  "callingCodes": [
    "1"
  ],
  "capital": "Ottawa",
  "altSpellings": [
    "CA"
  ],
  "region": "Americas",
  "subregion": "Northern America",
  "population": 36155487,
  "latlng": [
    60,
    -95
  ],
  "demonym": "Canadian",
  "area": 9984670,
  "gini": 32.6,
  "timezones": [
    "UTC-08:00",
    "UTC-07:00",
    "UTC-06:00",
    "UTC-05:00",
    "UTC-04:00",
    "UTC-03:30"
  ],
  "borders": [
    "USA"
  ],
  "nativeName": "Canada",
  "numericCode": "124",
  "currencies": [
    {
      "code": "CAD",
      "name": "Canadian dollar",
      "symbol": "$"
    }
  ],
  "languages": [
    {
      "iso639_1": "en",
      "iso639_2": "eng",
      "name": "English",
      "nativeName": "English"
    },
    {
      "iso639_1": "fr",
      "iso639_2": "fra",
      "name": "French",
      "nativeName": "français"
    }
  ],
  "translations": {
    "de": "Kanada",
    "es": "Canadá",
    "fr": "Canada",
    "ja": "カナダ",
    "it": "Canada",
    "br": "Canadá",
    "pt": "Canadá",
    "nl": "Canada",
    "hr": "Kanada",
    "fa": "کانادا"
  },
  "flag": "https://restcountries.eu/data/can.svg",
  "regionalBlocs": [
    {
      "acronym": "NAFTA",
      "name": "North American Free Trade Agreement",
      "otherAcronyms": [],
      "otherNames": [
        "Tratado de Libre Comercio de América del Norte",
        "Accord de Libre-échange Nord-Américain"
      ]
    }
  ],
  "cioc": "CAN"
}

EDIT: I have tried

var popupCreateLanguagesResultTD = document.createElement("div");
popupCreateLanguagesResultTD.className = "col";
result["languages"].forEach(obj => {
         Object.entries(obj).forEach(([name, value]) => {
             popupCreateLanguagesResultTD.innerText = (`${name} ${value}`);
          });
 });

But I get nativeName and then the native name of the language. e.g French -> francais.

Thank you Barmar, I forgot to include the various snippets of code I had tried from other StackOverflow Q&As. I've updated my post with the one that I feel most confident with, but I am still not getting the response I'm after. I think the second `.forEach` is what's causing the issue? — Ranisimo, Aug 22 '21 at 21:13
Nothing in your attempt uses `obj.languages` or accesses the `name` property. — Barmar, Aug 22 '21 at 21:15
You're iterating over all the properties in the object, not `obj.languages`. — Barmar, Aug 22 '21 at 21:15

score 0 · Answer 1 · answered Aug 22 '21 at 21:18

You're iterating over all the properties in the object, not the languages array.

Use map() to extract all the name properties from the objects in that array, and join() to combine them into a comma-separated string.

popupCreateLanguagesResultTD.innerText = obj.languages.map(lang => lang.name).join(", ");

score 0 · Accepted Answer · answered Aug 23 '21 at 01:00

So you have data

languages: Array(4)
0: {iso639_1: "en", iso639_2: "eng", name: "English", nativeName: "English"}
1: {iso639_1: "fj", iso639_2: "fij", name: "Fijian", nativeName: "vosa Vakaviti"}
2: {iso639_1: "hi", iso639_2: "hin", name: "Hindi", nativeName: "हिन्दी"}
3: {iso639_1: "ur", iso639_2: "urd", name: "Urdu", nativeName: "اردو"}
length: 4

and want to output

What I want it to look like: Languages Spoken: English, Fijian, Hindi, Urdu.

i think you can do

const langISpeak = languages.map( lang => lang.nativeName).join(', ')
console.log('i speak in : ' + langISpeak)

How do I iterate over a nested JSON object

2 Answers2