Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>It's not removing everything, the JSON request is just not finished when you do <code>items += "&lt;/select&gt;";</code>!</p> <p><a href="http://api.jquery.com/jQuery.getJSON/" rel="nofollow noreferrer"><code>$.getJSON</code></a> 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 <code>items += ...</code>, without waiting for <code>$.getJSON</code> to finish! Only when the response arrives, the given success function is called.</p> <p>You have two choices in how to solve that problem. Alternative 1 would be postponing all the assemblage of the <code>items</code> string until <code>$.getJSON</code> has succeeded:</p> <pre><code>$.getJSON("https://dev.xxx.com", function(data){ var items = "&lt;select id=\"orderer_search\" name=\"search\"&gt;"; $.each(data, function(index,item) { items += "&lt;option value='" + item + "'&gt;" + item + "&lt;/option&gt;"; }); items += "&lt;/select&gt;"; alert(items); // or whatever else you have to do with items } ); </code></pre> <p>Alternative 2 would be to <a href="https://stackoverflow.com/questions/2765411/is-it-possible-to-set-asyncfalse-to-getjson-call">make the <code>$.getJSON</code> call non-asynchronous</a>, so that the function waits for the response to come. You'd have to use the <code>$.ajax</code> function, like this:</p> <pre><code>var items = "&lt;select id=\"orderer_search\" name=\"search\"&gt;"; $.ajax({ url: "https://dev.webshop.restore.net.au/_pag/shop/TEST/? bc=TEST&amp;sec=order%2F&amp;pag=get_orderers_list", dataType: 'json', async: false, success: function(data) { $.each(data, function(index,item) { items += "&lt;option value='" + item + "'&gt;" + item + "&lt;/option&gt;"; } } }); items += "&lt;/select&gt;"; alert(items); // or whatever else you have to do with items </code></pre> <p>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.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload