CODEWITHSUNDEEP
javascriptjsonalertoutput
helm
helm

Reputation: 713

JavaScript variable empty without previous alert messge

I'm using the following function to create a list of links from a JSON-File and put them into a span element (jquery has been initialized)

$(document).ready(function() {

function createjson(category) {
        var content = "";
    i = 0;
    $.getJSON(category + ".txt", function(data){
        while(data[i] != null) {
            content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
            i++;
        }

    }); 
    document.getElementById("list_" + category).innerHTML = content;
}

createjson("cat1"); 

});

However, if I use it like this, the span element remains empty. It is only when I replace

document.getElementById("list_" + category).innerHTML = content;

with 

alert("test");
document.getElementById("list_" + category).innerHTML = content;

that I get the desired output. How can I get it without printing out an alert message beforehand?

Upvotes: 1

Views: 193

Answers (4)

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

That is becuase .getJSON() is an asynchronous method. Your code will try to update the DOM with content, before the server had time to respond to the request. Therefor no content is inserted.

With the alert, you stop the execution long enough for the server to respond, therefor it works when you add the alert.

The correct way to do it would be to move your content update into the success-callback instead, which is always run after the server has responded:

$.getJSON(category + ".txt", function(data){
    while(data[i] != null) {
        content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
        i++;
    }

    $("#list_" + category).html(content);
});

I replaced your document.getElementById("list_" + category).innerHTML = content; with the somewhat shorter jQuery equivalent $("#list_" + category).html(content); in the above example as well.

Upvotes: 3

Rowan
Rowan

Reputation: 5727

It's not the alert which is fixing this, the alert is basically blocking the UI for long enough for the AJAX request to complete.

$.getJSON is an asyncronous method. This means that the result of the function call is not always available immediately, you'll need to move your code which sets the list element HTML inside the $.getJSON callback:

$.getJSON(category + ".txt", function (data) {
    while(data[i] != null) { ... }
    document.getElementById("list_" + category).innerHTML = content;
});

Upvotes: 2

Prashant Singh
Prashant Singh

Reputation: 3793

Use this !== to compare with not equal to NULL

 while(data[i] !== null) {
            content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
            i++;
        }

Upvotes: 0

Waqar Alamgir
Waqar Alamgir

Reputation: 9978

Put the html append in callback, also reset the i when call back starts.

$(document).ready(function() {

function createjson(category) {

    $.getJSON(category + ".txt", function(data)
    {
        var content = "";
        for(i=0; i<data.length; i++)
        {
            content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
        }
        document.getElementById("list_" + category).innerHTML = content;
    }); 

}

createjson("cat1"); 

});

Upvotes: 1

Related Questions