Nested JSON fetch using jQuery

Question

I am trying to create an RSS Feed kind of Message display from Yammer.

<script type="text/javascript">
    var cleanit = null;
    $(document).ready(function(){ cleanit = setInterval('callYammer()', 50);});
    function callYammer(){ 
        clearInterval(cleanit);
        $.getJSON("./yammer.feed?request=messages",function(json) {
            var objYammer = $("#yammerFeed");
            objYammer.html('');
            $.each(json.messages, function(i, m) {
                if(!m.replied_to_id && m.body.plain){
                    var data = "<li>" + m.body.plain;
                    $.getJSON("./yammer.feed?request=users&userid="+m.sender_id,function(jsonUser) {
                        //alert(jsonUser.full_name);
                        data = data + " - "+jsonUser.full_name;
                    });
                    data = data + "</li>";
                    objYammer.append(data);
                }
            });
        });
        return false;
    }
</script>

I want to display Message along with it's Username. But in the end, from firebug debugger, what I see is the inner JSON data is not getting appended as I expected. Though the calls are hitting and data is coming from the call, the

data = " - "+jsonUser.full_name;

is getting executed after all JSON calls for Users.

How do I append Username from inner JSON call to main JSON data?

Carsten Massmann · Accepted Answer · 2013-09-16 09:24:04Z

1

You call the lines

data = data + "</li>";
objYammer.append(data);

in the code following your inner getJSON AJAX call, but that probably results in these lines being executed before the AJAX request has finished. Put the code INTO the inner AJAX success function to make sure it is fired only after the result is available.

function callYammer(){ 
    clearInterval(cleanit);
    $.getJSON("./yammer.feed?request=messages",function(json) {
        var objYammer = $("#yammerFeed");
        objYammer.html('');
        $.each(json.messages, function(i, m) {
            if(!m.replied_to_id && m.body.plain){
                var data = "<li>" + m.body.plain;
                $.getJSON("./yammer.feed?request=users&userid="+m.sender_id,function(jsonUser) {
                    console.log('1:'+jsonUser.full_name);
                    data += " - "+jsonUser.full_name + "</li>";
                    objYammer.append(data);
                    console.log('2:'+data);
                });
            }
        });
    });

Edit:

Just added the console.log() statements. What do they return?

edited Sep 16, 2013 at 9:24

answered Sep 16, 2013 at 9:11

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carsten Massmann Over a year ago

Do you mean: jsonUser.full_name is defined, but data += " - "+jsonUser.full_name + "</li>";objYammer.append(data); does not work?

Collectives™ on Stack Overflow

Nested JSON fetch using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related