javascript - what is the error with this code?

Question

This is a part of a javascript code that is working good. But I want to display the variable options in //Ex2 line:

if(profId==10){
    //alert(profId);
    $("#div_sel_residentType").show( "slow" );

    var selectElm="<label for=\"sel_residentType\">Sélectionniez le Type du Résident:</label><select class=\"form-control\" id=\"sel_residentType\"><option value=\"0\" selected=\"\">Type Résident</option>";
    var options ="";
    $.get("../api/v1/get/menus/typeresident.json.php", function(dataset, status){
        for (var index in dataset){ 
            options = options + "<option value=\""+dataset[index].id+"\">"+dataset[index].description+"</option>";
            //console.log(options);
        }
        console.log(options);//Ex1
    });

    console.log(options);//Ex2
    selectElm =  selectElm + options + "</select>";
    //console.log(selectElm);
    //$("#div_sel_residentType").html(selectElm);
}

I would like to understand why it displays console.log(options);//Ex1 but not console.log(options);//Ex2

Ex2 executes immediately after the $.get call. Ex1 executes after the call has received a response. — David Hedlund
– David Hedlund, Commented Nov 29, 2016 at 8:05
$.get is asynchronous, which means that the function you hand over to it will be called when the response is available. In the meantime your code will already proceed to be executed, coming to //Ex2 where options is still "". — connexo
– connexo, Commented Nov 29, 2016 at 8:07

Nikola Loncar · Accepted Answer · 2016-11-29 08:13:21Z

That ajax call is async meaning that value does not exists on Ex2 at that moment. Solution for that is to use deferred object take a look at this page : DOC

Example from link :

Since the jQuery.get method returns a jqXHR object, which is derived from a Deferred object, we can attach a success callback using the .done() method.

Full example from you code :

var options = "";
var defObj = $.get("../api/v1/get/menus/typeresident.json.php", function(dataset, status) {
      for (var index in dataset) {
        options = options + "<option value=\"" + dataset[index].id + "\">" + dataset[index].description + "</option>";
        //console.log(options);
      }
      console.log(options); //Ex1
    }); 

// get something done after ajax respone
defObj.done(function() {
    console.log(options); //Ex2
    selectElm = selectElm + options + "</select>";
});

or you can do it in single line :

$.get(/*...*/).done(/*...*/);

ruakh · Accepted Answer · 2016-11-29 08:06:17Z

1

$.get(...) initiates an asynchronous call. So execution will continue with the following statement, and only later (once the GET request has completed) will the callback be executed.

So the console.log(options);//Ex2 line is executed before options is populated. So it's equivalent to console.log("").

answered Nov 29, 2016 at 8:06

ruakh

185k29 gold badges292 silver badges324 bronze badges

2 Comments

IgorAlves Over a year ago

yes.. it is true.. how to make the callback after $get()?

IgorAlves Over a year ago

Ok dont worry... I just put a .done() and solved. thanks

jeffery_the_wind · Accepted Answer · 2016-11-29 08:08:02Z

0

console.log(options); //Ex2

This actually executes first. And look how the variable options is defined:

var options = "";

So if you are looking for something to print to the console, it is just white space so nothing will show up.

answered Nov 29, 2016 at 8:08

jeffery_the_wind

18.3k35 gold badges109 silver badges165 bronze badges

Collectives™ on Stack Overflow

javascript - what is the error with this code?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related