在下拉列表中显示 json 个对象

Question

我希望能从社区得到一些帮助。我试图了解如何编写代码以从 json 文件读取到下拉列表。我正在使用 node.js 到运行应用程序。

我正在从“http://localhost:4300/location”访问 json 对象： { "1": "82 North Wall Quay, 都柏林 1", "2": "Eastwall Wall Road, Dublin 3", “3”：“4 大运河广场，都柏林 2” }

<select id="location"> </select>

function populateSelect(shop_location){

var xhttp = new XMLHttpRequest
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status==200) {

showResult(xhttp.responseText);
}
};
xhttp.open("GET", "http://localhost:4300/location", true);
xhttp.send();
}

function showResult(jsonData) {
var txt = "";
var jsonData = JSON.parse(jsonData);
jsonData.forEach (x=>{txt = txt + "<br>" +x["Title"];})

document.getElementById("location").innerHTML = txt;
}

谢谢

Answer 1

您可以使用 for..in 循环遍历 JSON 对象的所有 keys 并为每个对象创建一个新的 option 元素。

最后使用append()方法将每个新创建的option元素添加到select元素中。

检查以下内容：

var jsonData = { 
  "1": "82 North Wall Quay, Dublin 1",
  "2": "Eastwall Wall Road, Dublin 3",
  "3": "4 Grand Canal Square,Dublin 2"
};

function showResult(jsonData) {
  let loc = document.getElementById("location");
  
  for(let key in jsonData) {
    let option = document.createElement("option");
    option.innerHTML = jsonData[key];
    option.value = key;
    loc.append(option);
  }
}

showResult(jsonData);

<select id="location">
</select>

Answer 2

var locationRequest = new XMLHttpRequest();

locationRequest.open('GET', 'http://localhost:4300/location')
locationRequest.onload = function() {
  var locationData = JSON.parse(locationRequest.responseText);
  showResult(locationData);
  console.log(locationData);
}

locationRequest.send();


function showResult(locationRequest) {
  let loc = document.getElementById("location");

  for (let key in locationRequest) {
    let option = document.createElement("option");
    option.innerHTML = locationRequest[key];
    option.value = key;
    loc.append(option);
  }
}

在下拉列表中显示 json 个对象

display json object in dropdown

javascript

ajax

json

node.js

dropdown