Question

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?

Answer 1

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"); 

});