在下拉列表中显示 json 对象答案

【问题标题】：display json object in dropdown在下拉列表中显示 json 对象
【发布时间】：2020-07-25 08:34:58
【问题描述】：

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

我正在从“http://localhost:4300/location”访问 json 对象： { "1": "82 North Wall Quay, Dublin 1", "2": "Eastwall Wall Road, Dublin 3", "3": "4 Grand Canal Square, Dublin 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;
}

谢谢

【问题讨论】：

显示您正在使用的数据。例如。 .forEach() 方法仅适用于数组...
你的 jsonData 是 json 数组还是 json 对象？显示 jsonData 的内容。
{ "1": "82 North Wall Quay, Dublin 1", "2": "Eastwall Wall Road, Dublin 3", "3": "4 Grand Canal Square, Dublin 2" }
请在帖子中包含所有相关信息。

标签： javascript node.js json ajax dropdown

【解决方案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>

【讨论】：

谢谢伊万！这在代码 sn-p 中效果很好，但我在节点 js ReferenceError: document is not defined for let loc = document.getElementById("location"); 上收到错误消息嗯，我可能需要做一些解析，因为 node.js 没有像浏览器那样内置的 DOM
如果我定义变量，这工作正常，但我想从 api 获取 json - 这是我得到的codepen.io/acazacu07/pen/YzyXgdN
@anca 很高兴它对您有用，并且您设法为您的 api 调用找到了解决方案。从您的问题中看不出您也有 api 问题。既然你是新成员，我会给你一个支持你的票。将来，请尝试在您的问题中包含所有可能的相关信息，以便您获得更准确的帮助。祝你有个好的一天！ :)

【解决方案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);
  }
}

【讨论】：