從外部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>