Here's an even better set of console.log() calls:
$.getJSON(friendURL, function(friends){
console.log( 1, friends.length );
$.getJSON(replyURL, function(replies){
console.log( 2, friends.length );
$.extend(friends, replies);
console.log( 3, friends.length );
});
console.log( 4, friends.length );
$.each(friends, function(item){
// Put the item on the page.
});
console.log( 5, friends.length );
});
So now each console.log entry will have two numbers, where the second number
is the value of friends.length at the time of each call. That should make it
apparent what the solution will be.
If you don't see it right away, feel free to drop by for another hint... :-)
-Mike
> From: Michael Geary
>
> Put some console.log() calls in your code and run it with
> Firebug enabled:
>
> $.getJSON(friendURL, function(friends){
> console.log(1);
> $.getJSON(replyURL, function(replies){
> console.log(2);
> $.extend(friends, replies);
> console.log(3);
> });
> console.log(4);
> $.each(friends, function(item){
> // Put the item on the page.
> });
> console.log(5);
> });
>
> Now do you see what the problem is and how to fix it?
>
> -Mike
>
> > From: Dr. Drang
> >
> > I'm working on a Twitter webapp, and I want to display both the
> > friends_timeline and replies streams, mixed together in
> chronological
> > (or reverse chronological) order. (FYI: the replies stream collects
> > tweets from people you *don't* follow as well as people you
> do. That's
> > why I want both.)
> >
> > I can do
> >
> > $.getJSON(friendURL, function(data){
> > $.each(data, function(item){
> > // Put the item on the page.
> > });
> > });
> >
> > $.getJSON(replyURL, function(data){
> > $.each(data, function(item){
> > // Put the item on the page.
> > });
> > });
> >
> > This collects everything and displays it, but the two streams are
> > separate. I'd like to be able to use $.extend() or
> > $.merge() to create one big stream and then sort it before
> displaying.
> > But the asynchonous nature of getJSON keeps confounding me.
> I thought
> > nesting would work:
> >
> > $.getJSON(friendURL, function(friends){
> > $.getJSON(replyURL, function(replies){
> > $.extend(friends, replies);
> > });
> > $.each(friends, function(item){
> > // Put the item on the page.
> > });
> > });
> >
> > but it doesn't. I end up with just the friends timeline.
> >
> > Is there a standard way of combining two objects that come from
> > getJSON?
> >
>
