Jquery- each loop not updating variable

Question

Can someone please tell me why this isn't working?

  var items = "<select id=\"orderer_search\" name=\"search\">";
  $.getJSON("https://dev.xxx.com", 
    function(data){
     $.each(data, function(index,item) { 
       items += "<option value='" + item + "'>" + item + "</option>";
     });           
  });

  items += "</select>";

If I place an alert(items) before:

items += "</select>";

The value is:

<select id="orderer_search" name="search">

But if I place an alert in the each loop, each popup is showing the value that has come back from the JSON request.

It is almost like as soon as the each loop is over, it is removing everything I added to the items variable during the each loop. I am new to JQuery so I'm sure it's something simple.

As per a couple of answers: you could use an `ajax` call that is has `async: false` if you have no other option. — Eben Roux, Sep 11 '12 at 06:33

score 2 · Accepted Answer · edited May 23 '17 at 12:21

It's not removing everything, the JSON request is just not finished when you do items += "</select>";!

$.getJSON runs asynchronously, meaning that the statement starts the request to the given URL, but it doesn't wait for the answer, the program flow then just continues on with the next statement (in your case the items += ..., without waiting for $.getJSON to finish! Only when the response arrives, the given success function is called.

You have two choices in how to solve that problem. Alternative 1 would be postponing all the assemblage of the items string until $.getJSON has succeeded:

$.getJSON("https://dev.xxx.com", 
    function(data){
       var items = "<select id=\"orderer_search\" name=\"search\">";
       $.each(data, function(index,item) { 
           items += "<option value='" + item + "'>" + item + "</option>";
       });
       items += "</select>";
       alert(items); // or whatever else you have to do with items
    }
);

Alternative 2 would be to make the $.getJSON call non-asynchronous, so that the function waits for the response to come. You'd have to use the $.ajax function, like this:

var items = "<select id=\"orderer_search\" name=\"search\">";
$.ajax({
    url: "https://dev.webshop.restore.net.au/_pag/shop/TEST/?
          bc=TEST&sec=order%2F&pag=get_orderers_list",
    dataType: 'json',
    async: false,
    success: function(data) { 
        $.each(data, function(index,item) { 
            items += "<option value='" + item + "'>" + item + "</option>";
        }
    }
});
items += "</select>";
alert(items); // or whatever else you have to do with items

Alternative 1 has the potential to make your script more responsive, if there is anything else to do apart from filling this select; because then the request is running in the background, quasi in parallel to your other code. So I would usually go for that.

score 1 · Answer 2 · answered Sep 11 '12 at 06:31

Tried like this..???

var items = "<select id=\"orderer_search\" name=\"search\">";
$.getJSON("https://dev.webshop.restore.net.au/_pag/shop/TEST/?
          bc=TEST&sec=order%2F&pag=get_orderers_list", 
function(data){
 $.each(data, function(index,item) { 
   items += "<option value='" + item + "'>" + item + "</option>";
 }); 
   items += "</select>";
});

score 0 · Answer 3 · answered Sep 11 '12 at 06:32

The $.getJSON() function is asynchronous, it means you'll get the result later.

So this part of code is executed before :

  items += "</select>";

What you have to do is execute evertything at the answer of your AJAX request.

  var items;
  $.getJSON("https://dev.webshop.restore.net.au/_pag/shop/TEST/?
              bc=TEST&sec=order%2F&pag=get_orderers_list", 
    function(data){
     items = "<select id=\"orderer_search\" name=\"search\">";
     $.each(data, function(index,item) { 
       items += "<option value='" + item + "'>" + item + "</option>";
     });
     items += "</select>";
  });

Jquery- each loop not updating variable

3 Answers3