如何迭代嵌套的 JSON 对象 [重复]

Posted 2023-05-08

【中文标题】如何迭代嵌套的 JSON 对象 [重复]

【英文标题】：How do I iterate over a nested JSON object [duplicate]

【发布时间】：2021-10-23 08:39:42

【问题描述】：

我有一个 JSON 对象。 在这个对象中，我有一个名为 'languages' 的对象数组，在这个数组中列出了超过 1 种语言对象。

如何构造一个forEach 循环来访问每个'language' 对象的'name'？

php cURL 例程输出的示例：

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

这是在通过 js 动态呈现的弹出窗口中使用数据的方式：

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

我希望它看起来像什么：使用的语言：英语、斐济语、印地语、乌尔都语。

---

JSON 文件结构示例：

  "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"

编辑：我试过了

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

但我得到nativeName，然后是语言的本地名称。例如法语 -> francais.

【问题讨论】：

*** 不是免费的编码服务。你应该try to solve the problem first。请更新您的问题以在minimal reproducible example 中显示您已经尝试过的内容。如需更多信息，请参阅How to Ask，并拨打tour :)

谢谢 Barmar，我忘了包括我在其他 *** 问答中尝试过的各种 sn-ps 代码。我已经用我最有信心的帖子更新了我的帖子，但我仍然没有得到我想要的回复。我认为第二个.forEach 是什么导致了这个问题？

您的尝试中没有任何内容使用obj.languages 或访问name 属性。

您正在迭代对象中的所有属性，而不是 obj.languages。

【参考方案1】：

所以你有数据

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

想输出

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

我觉得你可以的

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

【参考方案2】：

您正在迭代对象中的所有属性，而不是 languages 数组。

使用map() 从该数组中的对象中提取所有name 属性，并使用join() 将它们组合成一个逗号分隔的字符串。

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