Set up a for loop to fill image src's

Question

So I'm sending a request to NASA's APOD API and receiving back an array of info, part of which is an image url. I need to perform this action multiple times, and am wondering how to set this up as a for loop, or maybe just a function(?). The HTML is like this:

<img id="apod1">
<img id="apod2">
<img id="apod3">
...etc

And the JavaScript is like this:

// APOD1 XML REQUEST
var apod1Url = "https://api.nasa.gov/planetary/apod?concept_tags=True";
var apod1Xml = new XMLHttpRequest();
apod1Xml.open('GET', apod1Url, true);
apod1Xml.send(null);

// APOD1 URL FETCH AND IMAGE RENDER
apod1Xml.onreadystatechange=function() {
    if (apod1Xml.readyState==4 && apod1Xml.status==200) {
        var apod1Parse = JSON.parse(apod1Xml.responseText);
        document.getElementById('apod1').src = apod1Parse.url;
        console.log(apod1Parse.url);
    }
}

I know you can set up a for loop like:

for (i) { do stuff }

But how would I feed these imgs into something like that? Hopefully this is clear enough.

What part do you need done multiple time? What's determining the number of time? — loli, Jun 19 '15 at 13:45
@JBux The format of the returned array doesn't particularly matter... the apod1Parse.url bit is the only bit I'm concerned with. — j_d, Jun 19 '15 at 15:02

m4ktub · Accepted Answer · 2015-06-19T15:57:25.323

I'm not familiar with the API but you either:

request all images, let the browser do it's work, and then fill each img element or
have a queue and ask for the next image when the previous is done.

The first option could be something like:

var imgIds = [ 'apod1', 'apod2', 'apod3' ];
for (var i = 0; i < imgIds.length; i++) {
    (function(id) {
        // do request

        req.onreadystatechange=function() {
            if (apod1Xml.readyState==4 && apod1Xml.status==200) {
                var apod1Parse = JSON.parse(apod1Xml.responseText);
                document.getElementById(id).src = apod1Parse.url;
                console.log(apod1Parse.url);
            }
        }
    })(imgIds[i]);
}

The second option differs only slightly. You remove the for and process the next element of the array when the last request is done.

var imgIds = [ 'apod1', 'apod2', 'apod3' ];
function getNextImage() {
    if (imgIds.length == 0) {
        return;
    }

    // do request

    var id = imgIds.shift();
    req.onreadystatechange=function() {
        if (apod1Xml.readyState==4 && apod1Xml.status==200) {
            var apod1Parse = JSON.parse(apod1Xml.responseText);
            document.getElementById(id).src = apod1Parse.url;
            console.log(apod1Parse.url);

            // process next
            getNextImage();
        }
    }
}

// start with first image
getNextImage();

It's a typical pattern. Check here http://stackoverflow.com/questions/1634268/explain-javascripts-encapsulated-anonymous-function-syntax — m4ktub, Jun 19 '15 at 15:58

Set up a for loop to fill image src's

1 Answers1