Превращение JSON API-запроса в массив из нескольких переменных с использованием JavaScript - PullRequest
0 голосов
/ 06 октября 2019

Я учусь создавать адаптивные страницы, используя API выборки, который затем предварительно загрузит следующий набор параметров базы данных в раскрывающийся список. Я использую Javascript-файл, который в моем html-файле будет называться скриптом, этот java-скрипт затем вызывает php-файл AJAX, который берет информацию из моей базы данных и возвращает мне JSON-файл. Я получил это, чтобы частично работать, но выпадающий список, который я пытаюсь предварительно загрузить, показывает только номер 0 для любого количества городов, которые генерируются, однако мне нужно, чтобы значения заполнялись соответствующим «id» и имя опции с «name»города, которые приходят из файла JSON.

Я создал этот код, чтобы он работал ...

// function takes in a specific ID of a province
function fetchProvincialCities(provinceId) {

  var getRequestSent = 'provincial_cities_ajax.php?province_id=' + provinceId;

 fetch(getRequestSent)
  .then(function (response) {
  return response.json() // this returns a JSON from the called php file
 })
 .then(function (retrieved) {
  let cities = Object.keys(retrieved.cities);

  // cities should will have "id" and "name" for each entree
  // retrieved['success'] should return a true or a false
  if (retrieved['success']) {
    var citiesArray = [];
    for (var i in cities) {
      var a = cities[i];
      citiesArray.push(a);
    }
    //passes a prepared array of 2 variables "id" and "name"
    addCitiesToSelect(citiesArray);
  }
 });
}

Это еще одна функция, которая будет заполнять мой HTML

function addCitiesToSelect(cities) {
 // resets the select box before being populated
 let select = document.getElementById("city");
 if(select != null){
   for(var i = select.options.length - 1; i >=0; i--){
  select.remove(i);
 }
}
 // populates the html page with retrieved data
 select = document.getElementById("city");
 for (var index in cities) {
 select.options[select.options.length] = new Option(cities[index], index);
 }
}

Любая помощь будет принята с благодарностью.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...