Question

我有从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);
    }

我可以从控制台访问数组中的数据。

Answer 1

我不知道我的代码有什么问题

这是因为$.getJSON是异步功能。

基本上，您在createOptions AJAX 调用完成之前调用$.getJSON函数。

您需要附加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();
  });
}

Answer 2

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
    }
  );
}

Answer 3

由于$.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();
        }
      );
    }

Answer 4

您正在使用AJAX请求并在返回调用时正确构建currencyList，但在AJAX调用完成之前您正在调用createOptions。

这是因为代码会继续执行，立即调用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);
  });
}

从数组创建新的选择选项

4 个答案: