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元素。

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

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

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

4 个答案: