Create a new select options from array

Question

I have array created from JSON, and I want to create new options in my select. I do not have any errors, and I don't know what's wrong with my code. In HTML I have:

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

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

I can access data in the array from the console.

getCurrencies() is asynchronous, so createOptions() is called immediately after getCurrencies(), which means currencyList more than likely will not be populated yet. — Ryan Wilson
– Ryan Wilson, Commented May 2, 2018 at 13:43

Mihai Alexandru-Ionut · Accepted Answer · 2018-05-02 14:06:32Z

2

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

That's because the $.getJSON is an async function.

Basically, you're invoking createOptions function before the $.getJSON AJAX call is done.

You need to attach done promise callback function.

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

edited May 2, 2018 at 14:06

answered May 2, 2018 at 13:46

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gurvinder372 · Accepted Answer · 2018-05-02 13:43:30Z

1

getCurrencies is an asynchronous call, so currencyList is still empty when createOptions is called.

Call createOptions(); after 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
    }
  );
}

answered May 2, 2018 at 13:43

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

1 Comment

DeWuKa Over a year ago

Thanks for answer, now i understand my mistake!

Radonirina Maminiaina · Accepted Answer · 2018-05-02 13:43:51Z

0

Because the $.getJSON is async function, you should call createOptions() into it not into your document ready function:

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

answered May 2, 2018 at 13:43

Radonirina Maminiaina

7,0144 gold badges36 silver badges63 bronze badges

Comments

Nope · Accepted Answer · 2018-05-02 13:52:04Z

You are using an AJAX Request and correctly build the currencyList upon the return of the call but you are calling createOptions before the AJAX call is done.

That is because the code will continue executing, calling getCurrency and createOptions right away.

You can call createOptions from the getCurrency success directly, similar to the below, passing the currency list into it:

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

You can also just process the currency more directly as it comes in, similar to this:

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

Collectives™ on Stack Overflow

Create a new select options from array

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related