Question

我有以下代码：

$.getJSON('data.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<option id="' + key + '">' + val + '</option>');
  });

  $('<select/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

这适用于一个简单的JSON文件，但我有一些更复杂的数据（这是给我的方式）：

{
   "Shares": [
   {
      "shareName": "Frontier",
      "shareID": "FML"
   },
   {
      "shareName": "Global Petroleum",
      "shareID": "GBP"
   },
   {
      "shareName": "Tower Petroleum",
      "shareID": "TRP"
   },
   {
      "shareName": "Aquarius Platinum",
      "shareID": "AQP"
   }
   ]
}

这只是填充一个下拉菜单，我应该如何修改语法，以便为每个内部读取“ShareName”？

谢谢！

感谢大家的答案，我只能选择一个，所以选择了第一个回复，但我非常感谢大家的意见！

Answer 1

首先，您必须迭代data.Shares。注意大写S; JavaScript区分大小写。

您还必须引用shareName和shareID属性，而不仅仅是键和值。

  $.each(data.Shares, function(_, val) {
    items.push('<option id="' + val.shareID + '">' + val.shareName + '</option>');
  });

为了巩固理解，你拥有的是一个对象（data），它有一个属性（Shares），它是一个对象数组。该数组中的每个对象都有2个属性; shareID和shareName。

Answer 2

迭代data.Shares，但我建议直接创建<option>元素，而不是通过连接HTML来确保正确转义任何元字符：

$select = $('<select/>', {
    'class': 'my-new-list',
});

$.each(data.Shares, function(index, val) {
    $('<option>', {
       id: val.shareID, val: val.shareID, text: val.shareName
    }).appendTo($select);
});

$select.appendTo('body');

请注意，我还将共享ID放入<option>值，以便您可以在后端使用缩写标记而不是完整的共享名称。

Answer 3

解析后，它是一个javascript对象，因此不是迭代数组，而是迭代Shares字段命名的数组：

$.each(data.Shares, function(key, val) {
  items.push('<option id="' + val.shareID + '">' + val.shareName + '</option>');
});

Answer 4

    $.each(data.Shares, function(val) {
         items.push('<option id="' + val.ShareId+ '">' + val.ShareName+ '</option>');
    });

如何引用JSON？

4 个答案: