отобразить json объект в выпадающем списке - PullRequest
Новая
       11

отобразить json объект в выпадающем списке

1 голос
/ 12 апреля 2020

Я надеюсь получить помощь от сообщества. Я пытаюсь понять, как написать код для чтения из файла json в раскрывающийся список. Я использую node.js для запуска приложения.

Я получаю доступ к json объекту из "http://localhost: 4300 / location ": {"1": "82 Северная стена Набережная, Дублин 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;
}

Спасибо

Ответы [ 2 ]

0 голосов
/ 13 апреля 2020 
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);
  }
}
0 голосов
/ 12 апреля 2020

Вы можете использовать for..in l oop, чтобы перебрать все keys объекта JSON и создать новый элемент 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>
...