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
– Eben Roux, Commented Sep 11, 2012 at 6:33

Community · Accepted Answer · 2017-05-23 12:21:17Z

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.

GautamD31 · Accepted Answer · 2012-09-11 06:31:19Z

1

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

answered Sep 11, 2012 at 6:31

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Comments

odupont · Accepted Answer · 2012-09-11 06:32:46Z

0

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

answered Sep 11, 2012 at 6:32

odupont

1,98613 silver badges16 bronze badges

Collectives™ on Stack Overflow

Jquery- each loop not updating variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related