Question

I want to populate an array of objects with data pulled from a getJSON function.

I’m currently doing it object by object, but know it’d be much cleaner with a for loop…

Here’s the getJSON:

$.getJSON("http://www.reddit.com/r/pics.json?jsonp=?",
    function(data) {

        var imageurl1 = data.data.children[0].data.url;
        var imagecaption1 = data.data.children[0].data.title;;
        var commentlink1 = "http://www.reddit.com" + data.data.children[0].data.permalink;

        var imageurl2 = data.data.children[1].data.url;
        var imagecaption2 = data.data.children[1].data.title;
        var commentlink2 = "http://www.reddit.com" + data.data.children[1].data.permalink;

       }

And here’s the array I’m using the data for

var lightboximages = [
 { 
    src: imageurl1,
    caption: imagecaption1,
    comments: commentlink1
 }, { 
    src: imageurl2,
    caption: imagecaption2,
    comments: commentlink2
 }]

Any help with the loop would be much appreciated!

Answer 1

Not tested, but this is the idea:

$.getJSON("http://www.reddit.com/r/pics.json?jsonp=?",
    function(data) {
       var lightboxArray = [];
       for (var i=0; i<data.data.children.length; i++) {
           var child = data.data.children[i];
           var lightboxObj = {"src":child.data.url, "caption":child.data.title, "comments":child.data.permalink};
           lightboxArray.push(lightboxObj);
       }
       // now call some function to process the array we've built
    });