How do I pass in a string to get populated by getJSON's function?

Question

I'd like to do something like:

var content = "";
$.getJSON("/plants", function(result) {
    $.each(result.plants), function() {
        content += "<tr><td>"+this.plant_name+"</td></tr>";
    });
});
$("#plant_table").append(content);

By the time I do the append at the last line, content is empty. I'd guess it's because of the scope of the content variable, but I'm unfamiliar with how to remedy this.

Thanks in advance.

put last line in callback as **dandavis** said, and check `console.log(result)` - maybe your script returns nothing — vladkras, Jul 06 '13 at 01:58

BjornJohnson · Accepted Answer · 2013-07-06T02:10:28.713

As @dandavis and probably the other person who I just see answered this said, try:

var content = "";
$.getJSON("/plants", function(result) {
    $.each(result.plants), function() {
        content += "<tr><td>"+this.plant_name+"</td></tr>";
    });
    $("#plant_table").append(content);
});

The $.getJSON is non-blocking / asynchronous, thus your .append() is occurring prior to $.getJSON() succeeding and manipulating the variable named content.

score 0 · Answer 2 · answered Jul 06 '13 at 01:54

0

You have to put the content $("#plant_table").append(content); in getJSON function.
Because if the content is out of getJSON function, it is ran firstly. It is synchronize problem. :)

answered Jul 06 '13 at 01:54

Sea guy

178
1
2
10

How do I pass in a string to get populated by getJSON's function?

2 Answers2