can not get correct value of variable outside of getJSON function

Question

I have variable that is named as items. if I access it's value inside getjson function I get correct value. but if I access it's value outside of getJSON function I get string empty value. I need your help to understand what is problem. Thanks for any help! in advance

$("#CityId").on('click',function(e){
    e.preventDefault();
    var htmlText = "<ul class=ulList>";
    var mainDiv = $('.divCounties');
    var items = "";
    for (var i = 0; i < arrCity.length; i++) {
        htmlText += "<li class=ilceCaption>" + arrCity[i].text; // +"</li>";
        htmlText += "<ul>";
        $.getJSON("../Adds/GetCounties", {cityId: arrCity[i].value }, function(data){
            $.each(data, function(i, state) {
                items += state.Text;
                //htmlText += "<li>" + state.Text + "</li>";
            }); 
            console.log(items); // ==> is getting correct value in this line**    
        });
        htmlText += "</ul>";
        htmlText += "</li>";
        console.log(items); // ==> is getting string empty value in this line**
    }
    htmlText += "</ul>";
    console.log(htmlText);
    mainDiv.html(htmlText);
});

you can around this problem by using .done() look at my answer — aitnasser
– aitnasser, Commented Dec 12, 2015 at 12:11

aitnasser · Accepted Answer · 2015-12-12 12:11:10Z

when you show the value of items outside getJSON variable it's normal to be empty because it takes its value at success callback of $.getJSON method , in other words you want to display it in synchronous mode while it is initialized and take its value in asynchronous mode, you can around this problem by using .done() your code will become as follows:

$("#CityId").click(function () {
            var htmlText = "<ul class=ulList>";
            var mainDiv = $('.divCounties');
        var items = "";

            for (var i = 0; i < arrCity.length; i++) {

                htmlText += "<li class=ilceCaption>" + arrCity[i].text; // +"</li>";

                htmlText += "<ul>";

                $.getJSON("../Adds/GetCounties", { cityId: arrCity[i].value },
            function (data) {

                $.each(data, function (i, state) {
                    items += state.Text;
                //htmlText += "<li>" + state.Text + "</li>";

                }); 
    console.log(items); **// ==> is getting correct value in this line**                
            }).done(function() {
    console.log( "second success" );
    console.log(items);
  });

            htmlText += "</ul>";
            htmlText += "</li>";


            }

            htmlText += "</ul>";
            console.log(htmlText);

      mainDiv.html(htmlText);

Community · Accepted Answer · 2017-05-23 11:44:41Z

You shoud use promise and done function:

$("#CityId").on('click',function(e){
    e.preventDefault();
    var htmlText = "<ul class=ulList>";
    var mainDiv = $('.divCounties');
    var items = "";
    for (var i = 0; i < arrCity.length; i++) {
        htmlText += "<li class=ilceCaption>" + arrCity[i].text; // +"</li>";
        htmlText += "<ul>";
        $.getJSON("../Adds/GetCounties", {cityId: arrCity[i].value }, function(data){
            $.each(data, function(i, state) {
                items += state.Text;
                //htmlText += "<li>" + state.Text + "</li>";
            }).promise().done(function(){
                console.log(items);
            })
        });
        htmlText += "</ul>";
        htmlText += "</li>";
        console.log(items);
    }
    htmlText += "</ul>";
    console.log(htmlText);
    mainDiv.html(htmlText);
});

How to Jquery each complete

Collectives™ on Stack Overflow

can not get correct value of variable outside of getJSON function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related