How to get the variable value after the $getJSON?

Question

In the code below, I have a function counter which counts element. I use the counter function in order to count the elements that I have in the JSON file. My question is how can I get the value of the counter after the $getJSON, and why when I console log the counter outside of the brackets I keep on getting undefined, why it does not remember the last value, while if I console log the counter inside the brackets I get the number of elements in the JSON file. I want to get the number of elements so afterwards I can use that number in the for loop below.

// global variables

var c = 0;
var a;
var b;

// counter function

function counter() {
    return c++;
}

// document ready function

$(document).ready(function () {
    $.getJSON("https://graph.facebook.com/v3.2/...", function (data) {
        var items = [];
        $.each(data.data, function (i, obj) {
            //$('#target').append($('<div/>', { id: 'dummy' + i }))
            var text = '<p class="review_text">' + obj.review_text + '</p>'
            var date = '<p class="date">' + obj.created_time + '</p>'
            a = counter();
            $("#carousel").find("[data-index='" + i + "']").append(text, date)

            console.log(a) //here I get the number of elements inside the JSON file

        });
    });
    console.log(a) //but if I put the console log here, I get undefined instead of the number
        var wrapper = document.getElementById("carousel");
        var myHTML = '';
        for (b = 0; b <= a; b++) { //here I want to use what the function returns, so if I have 10 elements in the JSON file I can create 10 div elements in the HTML, it works only if I put number instead of 'a' but I want to use 'a' so I do not have to count the elements as well, the elements will increase.
            myHTML += '<div id="review" data-index=' + (b) + '></div>';
        }
        wrapper.innerHTML = myHTML
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Because the loading is asynchronous and the assignment hasn’t happened yet when you log it out — Sami Kuhmonen, Dec 14 '18 at 18:51
@SamiKuhmonen okay, thank you. Do you have any idea how I could get that value over there in the foor loop? — Victor Gavrilovic, Dec 14 '18 at 18:53
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — nicholaswmin, Dec 14 '18 at 18:55
@SamiKuhmonen if I put the for loop along with the variables above it inside the $getJSON, it does not work and it does not create html divs — Victor Gavrilovic, Dec 14 '18 at 18:55
@Victor you'll need to read it a bit more and try to understand it then, it's a common problem for people without much asynchronous development experience — Nick is tired, Dec 14 '18 at 19:09

score 1 · Accepted Answer · answered Dec 14 '18 at 19:10

1

Move the code inside the ajax call so that it executes AFTER the data is returned/processed:

$(document).ready(function () {
    $.getJSON("https://graph.facebook.com/v3.2/...", function (data) {
        var items = [];
        $.each(data.data, function (i, obj) {
            //$('#target').append($('<div/>', { id: 'dummy' + i }))
            var text = '<p class="review_text">' + obj.review_text + '</p>'
            var date = '<p class="date">' + obj.created_time + '</p>'
            a = counter();
            $("#carousel").find("[data-index='" + i + "']").append(text, date)

            console.log(a) //here I get the number of elements inside the JSON file

        });

    console.log(a) //but if I put the console log here, I get undefined instead of the number
    var wrapper = document.getElementById("carousel");
        var myHTML = '';
        for (b = 0; b <= a; b++) { //here I want to use what the function returns, so if I have 10 elements in the JSON file I can create 10 div elements in the HTML, it works only if I put number instead of 'a' but I want to use 'a' so I do not have to count the elements as well, the elements will increase.
            myHTML += '<div id="review" data-index=' + (b) + '></div>';
        }
        wrapper.innerHTML = myHTML;
    });       
});

answered Dec 14 '18 at 19:10

Nawed Khan

4,393
1
10
22

It does not work. I have just tried it, it does return the value that I need but I have another problem, and that is: it does not create div elements in the html... – Victor Gavrilovic Dec 14 '18 at 19:43
There is no change so there should be no difference except that now the loop happend after the ajax call back, What is the value of "a" you are getting in console? what is the value of "myHTML" in console.log? Also try replacing "a" with 10 in your loop, like you tried earlier to see if that still works. – Nawed Khan Dec 14 '18 at 19:56
The value of “myHTML” in the console log are the divs but I have another problem. From the js I am inserting div elements inside the owl carousel div, and when I do it like this the divs do not get the owl-item class.. – Victor Gavrilovic Dec 14 '18 at 21:18
What you are mentioning now is outside the scope of the problem mentioned in the question. Basically you have more code after these lines which is dependent on the code that is now inside the async method hence not working anymore. You are applying carousel on divs that are not created yet. – Nawed Khan Dec 14 '18 at 21:27
Yes, that is true! – Victor Gavrilovic Dec 14 '18 at 22:56
so move everything that is dependent on this inside.... try line by line. – Nawed Khan Dec 14 '18 at 23:04
What do tou mean? – Victor Gavrilovic Dec 15 '18 at 00:05

How to get the variable value after the $getJSON?

1 Answers1