CODEWITHSUNDEEP
javascriptajaxfacebook
glasses
glasses

Reputation: 763

Trouble using for loop in JavaScript to run multiple ajax requests to FaceBook and retrieve likes for pages

I am trying to run x number of ajax requests to facebook and store the data objects in an array so I can use the data on my page. for example I would like to call the data using something like this: dataStore[0].data.likes

I am running into an issue with pushing the data object the ajax request retrieves into the array. Thanks for any help you can provide!

var busNames = ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'];
var dataStore = [];

  for(i=0; i<busNames.length; i+=1){
      $.ajax({
      url: 'http://graph.facebook.com/' + busNames[i] +'/?limit=5&callback=?',
      dataType: 'json',
      success: function(data, status) {
          dataStore.push(data);
      },
      error: function(data, e1, e2) {console.log(data + e1 + e2);
      }
    });// end ajax

  }// end loop

console.log( busNames[0] + " Likes: " + dataStore[0].data.likes);
console.log( busNames[1] + " Likes: " + dataStore[1].data.likes);
console.log( busNames[2] + " Likes: " + dataStore[2].data.likes);
console.log( busNames[3] + " Likes: " + dataStore[3].data.likes);
console.log( busNames[4] + " Likes: " + dataStore[4].data.likes);
console.log( busNames[5] + " Likes: " + dataStore[5].data.likes);

JSFiddle: http://jsfiddle.net/BJPvs/

Upvotes: 0

Views: 1071

Answers (2)

Loktar
Loktar

Reputation: 35309

var busNames = ['cocacola', 'apple', 'mtndew', 'drpepper', 'page5', 'page6'];
var dataStore = [];

for (i = 0; i < busNames.length; i += 1) {
    (function (index) {
        $.ajax({
            url: 'http://graph.facebook.com/' + busNames[i] + '/?limit=5&callback=?',
            dataType: 'json',
            success: function (data, status) {
                dataStore.push(data);
                //console.log(busNames[index] + " Likes: " + data.likes);
            },
            error: function (data, e1, e2) {
                console.log(data + e1 + e2);
                dataStore.push(data);
            }
        }); // end ajax
    })(i)
} // end loop


// grab them afterward.
function wait() {
    if (dataStore.length == busNames.length) {
        for (var i = 0; i < dataStore.length; i++) {
            console.log(busNames[i] + " Likes: " + dataStore[i].likes);
        }
    } else {
        setTimeout(wait, 100);
    }
}

wait();

Live Demo

Better ways to do it Im sure, but all I did was wrap it in a closure and passed the index to the function. Added a function that waits until the values have been loaded before logging them out to the console.

Upvotes: 1

Peter Holm
Peter Holm

Reputation: 159

Actually your code works fine, but the 6 prints to the console in the end gets executed before you push the data to the dataStore array. That is because the success function is a callback. So if you print to the console inside of your callback, you will see, that all the data gets pushed to the array just fine :-)

var busNames = ['cocacola', 'apple', 'mtndew', 'drpepper', 'page5', 'page6'];
var dataStore = [];

  for(i=0; i<busNames.length; i+=1){
      $.ajax({
      url: 'http://graph.facebook.com/' + busNames[i] +'/?limit=5&callback=?',
      dataType: 'json',
      success: function(data, status) {
          dataStore.push(data);
          console.log(dataStore);
      },
      error: function(data, e1, e2) {console.log(data + e1 + e2);
      }
    });// end ajax
  }// end loop
// });

/*console.log( busNames[0] + " Likes: " + dataStore[0].data.likes);
console.log( busNames[1] + " Likes: " + dataStore[1].data.likes);
console.log( busNames[2] + " Likes: " + dataStore[2].data.likes);
console.log( busNames[3] + " Likes: " + dataStore[3].data.likes);
console.log( busNames[4] + " Likes: " + dataStore[4].data.likes);
console.log( busNames[5] + " Likes: " + dataStore[5].data.likes);*/

JSFiddle: http://jsfiddle.net/BJPvs/1/

Upvotes: 1

Related Questions