У меня есть массив, созданный из 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);
}
Я могу получить доступ к данным в массиве с консоли.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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
}
);
}
Спасибо за ответ, теперь я понял свою ошибку!
Поскольку $.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);
});
}
getCurrencies () является асинхронным, поэтому createOptions () вызывается сразу после getCurrencies (), что означает, что currencyList, скорее всего, еще не будет заполнен.