Создать новые параметры выбора из массива

У меня есть массив, созданный из JSON, и я хочу создать новые параметры в моем выборе. У меня нет ошибок, и я не знаю, что не так с моим кодом. В HTML у меня есть:

<select class = "currencyList">
</select>

А в JS:

var currencyList = [];

    $(document).ready(function() {
      getCurrencies();
      createOptions();
    });

    function getCurrencies() {
      $.getJSON(
        "http://api.nbp.pl/api/exchangerates/tables/a/?format=json",
        function(response) {
          $.each(response[0].rates, function(i, item) {
            currencyList.push(item);
          });
        }
      );
    }

    function createOptions() {
      var option = "";
      for (var i = 0; i < currencyList.length; i++) {
        option += "<option value='" + currencyList[i].code + "'>" + currencyList[i].currency + "</option>";
      }
        $(".currencyList").append(option);
    }

Я могу получить доступ к данным в массиве с консоли.

getCurrencies () является асинхронным, поэтому createOptions () вызывается сразу после getCurrencies (), что означает, что currencyList, скорее всего, еще не будет заполнен.

Ryan Wilson 02.05.2018 15:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
62
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

getCurrencies - это асинхронный вызов, поэтому currencyList все еще пуст, когда вызывается createOptions.

Позвоните в createOptions(); после each

$(document).ready(function() {
  getCurrencies();      
});

function getCurrencies() {
  $.getJSON(
    "http://api.nbp.pl/api/exchangerates/tables/a/?format=json",
    function(response) {
      $.each(response[0].rates, function(i, item) {
        currencyList.push(item);
      });
      createOptions();//call here
    }
  );
}

Спасибо за ответ, теперь я понял свою ошибку!

DeWuKa 02.05.2018 16:21

Поскольку $.getJSON является асинхронной функцией, вы должны вызывать createOptions() в ней, а не в функции готовности документа:

function getCurrencies() {
      $.getJSON(
        "http://api.nbp.pl/api/exchangerates/tables/a/?format=json",
        function(response) {
          $.each(response[0].rates, function(i, item) {
            currencyList.push(item);
          });
          createOptions();
        }
      );
    }
Ответ принят как подходящий

I don't know what's wrong with my code

Это потому, что $.getJSON - это функция асинхронный.

По сути, вы вызываете функцию createOptions до того, как будет выполнен вызов $.getJSONAJAX.

Вам нужно прикрепить функцию обещания doneПерезвоните.

function getCurrencies() {
  $.getJSON(
    "http://api.nbp.pl/api/exchangerates/tables/a/?format=json",
    function(response) {
      $.each(response[0].rates, function(i, item) {
        currencyList.push(item);
      });
    }
  ).done(function(){
       createOptions();
  });
}

Вы используете запрос AJAX и правильно строите currencyList после возврата вызова, но вы вызываете createOptions до того, как будет выполнен вызов AJAX.

Это потому, что код продолжит выполнение, сразу вызывая getCurrency и createOptions.

Вы можете вызвать createOptions из успеха getCurrency напрямую, как показано ниже, передав в него список валют:

function getCurrencies() {
  $.getJSON(
    "http://api.nbp.pl/api/exchangerates/tables/a/?format=json",
    function(response) {
      var currencyList;

      $.each(response[0].rates, function(i, item) {
        currencyList.push(item);
      });

      createOptions(currencyList)
    }
  );
}

function createOptions(currencyList) {
  var option = "";
  for (var i = 0; i < currencyList.length; i++) {
    option += "<option value='" + currencyList[i].code + "'>" + currencyList[i].currency + "</option>";
  }
  $(".currencyList").append(option);
}

Вы также можете просто обрабатывать валюту напрямую по мере поступления, например:

function getCurrencies() {
  $.getJSON(
    "http://api.nbp.pl/api/exchangerates/tables/a/?format=json",
    createList
  );
}

function createList(response) {
  var $list = $(".currencyList");
  var option;

  $.each(response[0].rates, function(i) {
    option = "<option value='" + response[0].rates[i].code + "'>" + response[0].rates[i].currency + "</option>"

    $list.append(option);
  });
}

Другие вопросы по теме