从外部json填充下拉列表

Question

我是JSON的新手并且正在努力解决以下问题。

我有一个外部JSON文件

teamSkills = '[\
    {"name":"John", "team":"Red"}, \
    {"name":"Anna", "team":"Green"}, \
    {"name":"Peter", "team":"Orange"}\
]

我希望我的HTML文件读取团队名称并填充下拉列表。从搜索网络和“播放”代码，我现在有以下JavaScript，但它使用的数组不是外部JSON（将包含大量记录）：

var TeamName = ["Red", "Green", "Orange"];
var sel = document.getElementById('teamList');
var fragment = document.createDocumentFragment();
TeamName.forEach(function(team, index) {
  var opt = document.createElement('option');
  opt.innerHTML = team;
  opt.value = team;
  fragment.appendChild(opt);
});
sel.appendChild(fragment);

HTML代码：

<select id="teamList"></select> 

可以更新以从外部JSON文件获取数据吗？

Answer 1

对象数组和字符串数组几乎是一回事。你可以用TeamName替换teamSkills然后从内部对象访问team：

// Not sure what is the initial format of your data here,
// use JSON.parse('your string') if you have a string to start with
var teamSkills = [
    {"name":"John", "team":"Red"},
    {"name":"Anna", "team":"Green"},
    {"name":"Peter", "team":"Orange"}
];
var sel = document.getElementById('teamList');
var fragment = document.createDocumentFragment();
// Here, iterate through the skills instead
teamSkills.forEach(function(skill, index) {
  var opt = document.createElement('option');
  // Here, access the team from the current skill object
  opt.innerHTML = skill.team;
  opt.value = skill.team;
  fragment.appendChild(opt);
});
sel.appendChild(fragment);

Answer 2

您可以使用此代码，它将与您合作

$.each(TeamName, function(key, value) {   
$('#teamList').append($("<option></option>").attr("value",key).text(value)); 
});

Answer 3

很抱歉使用不同的代码：

let dropdown = $('#teamList');

const teamSkills = 'https://api.myjson.com/bins/1abhwz';

// Populate dropdown with list of provinces
$.getJSON(teamSkills, function(data) {
  $.each(data, function(key, entry) {
    dropdown.append($('<option></option>').attr('value', entry.name).text(entry.team));
  })
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select id="teamList"></select>