如何循环获取数组Javascript中的对象的值？

Question

更新： respons完整值：

"{"versions":[  
   {  
      "name":"Windows 8.1 with Update 3 (build 9600)",
      "version_id":"11"
   },
   {  
      "name":"Windows 7 SP1 (build 7601)",
      "version_id":"9"
   },
   {  
      "name":"Windows 10, Version 1803 - Redstone 4 [Apr 2018] (build 17134.1)",
      "version_id":"97"
   },
   {  
      "name":"Windows 10, Version 1709 - Redstone 3 [Sep 2017] (build 16299.15)",
      "version_id":"92"
   },
   {  
      "name":"Windows 10, Version 1703 - Redstone 2 [March 2017] (build 15063.0)",
      "version_id":"41"
   },
   {  
      "name":"Windows 10, Version 1607 - Redstone 1 [Jul 2016] (build 14393.0)",
      "version_id":"16"
   },
   {  
      "name":"Windows 10, Version 1511 - Threshold 2 [Nov 2015] (build 10586.0)",
      "version_id":"13"
   },
   {  
      "name":"Windows 10, Version 1511 - Threshold 2 [Feb 2016] (build 10586.104)",
      "version_id":"14"
   },
   {  
      "name":"Windows 10, Version 1511 - Threshold 2 [Apr 2016] (build 10586.164)",
      "version_id":"15"
   },
   {  
      "name":"Windows 10, Version 1507 - Threshold 1 [Jul 2015] (build 10240.16384)",
      "version_id":"12"
   }
]
}"

我有一个数组看起来像这样：

{
   "versions":[
      {
         "name":"Windows 8.1 with Update 3 (build 9600)",
         "version_id":"11"
      },
      {
         "name":"Windows 7 SP1 (build 7601)",
         "version_id":"9"
      },
      {
         "name":"Windows 10, Version 1803 - Redstone 4 [Apr 2018] (build 17134.1)",
         "version_id":"97"
      }
   ]
}

我想获取name和version_id以添加到选择下拉列表中。 看起来像：

  success: function(response){
    var options = ''; 

    $(response.versions).each(function() {
        options += '<option value="' + $(this).attr('version_id') + '">' + $(this).attr('name') + '</option>';
    });

但是我无法获取version_id和name 。 有什么方法可以做到这一点？

Answer 1

不需要jQuery，只需遍历versions属性即可。 直接设置属性和文本内容比插入要解析为HTML的文本更为安全：

 const input = { "versions": [{ "name": "Windows 8.1 with Update 3 (build 9600)", "version_id": "11" }, { "name": "Windows 7 SP1 (build 7601)", "version_id": "9" }, { "name": "Windows 10, Version 1803 - Redstone 4 [Apr 2018] (build 17134.1)", "version_id": "97" } ] }; const select = document.querySelector('select'); input.versions.forEach(({ name, version_id }) => { const option = select.appendChild(document.createElement('option')); option.value = version_id; option.textContent = name; }); 

 <select> </select> 

Answer 2

您不需要$()和attr()用于读取html元素的属性

this是对象，因此只需使用对象表示法即可访问其属性

 $.each(response.versions, function() {
        options += '<option value="' + this.version_id + '">' + this.name + '</option>';
 });

Answer 3

您可以简单地遍历数组并附加生成的html以选择标签

 var data = { "versions":[ { "name":"Windows 8.1 with Update 3 (build 9600)", "version_id":"11" }, { "name":"Windows 7 SP1 (build 7601)", "version_id":"9" }, { "name":"Windows 10, Version 1803 - Redstone 4 [Apr 2018] (build 17134.1)", "version_id":"97" } ] }; data.versions.forEach(function(e){ $("#sel").append(`<option value="${e.version_id}">${e.name}</option>`) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select id="sel"></select> 

Answer 4

正如其他人所说：不需要jQuery。 不确定jQuery是否可以以这种方式使用JSON，因为该函数主要用于访问XML / DOM元素。

这里是一个使用map和reduce的简单ES6版本：

response.versions.map(v => `<option value="${v.version_id}">${v.name}</option>`).reduce((acc, opt) => acc + opt)