How to fill divs with imgs dynamically?

Question

http://jsfiddle.net/84nv2dmL/

I'm trying to get these images of letters to display in order. I tried creating divs dynamically and filling them with the img, but that didn't work. How can I get these letters to display in order?

---

jsfiddle code:

function getQueryStringVar(name){
    var qs = window.location.search.slice(1);
    var props = qs.split("&");
    for (var i=0 ; i < props.length;i++){
        var pair = props[i].split("=");
        if(pair[0] === name) {
            return decodeURIComponent(pair[1]);
        }
    }
}

function getLetterImage(tag){

var flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

            return $.getJSON( flickerAPI, {
                tags: tag,
                tagmode: "all",
                format: "json"
            })
            .then(function (flickrdata) {
                //console.log(flickrdata);
                var i = Math.floor(Math.random() * flickrdata.items.length);
                var item = flickrdata.items[i];
                var url = item.media.m;
                return url;
                }); 
}



$(document).ready(function() {
        var name = getQueryStringVar("name") || "Derek";

            var str = "letter,";
            var searchtags = new Array()
            for (var i = 0; i < name.length; i++) {
                //console.log(str.concat(searchtags.charAt(i)));
                searchtags[i] = str.concat(name.charAt(i));
            }
            for (var j = 0; j < name.length; j++){
            var request = getLetterImage(searchtags[j]);
            request.done(function(url) {
                $("body").append("<img src="+ url + "></img>");

                //var ele = document.createElement("div");
                //ele.setAttribute("class", "img" + j--);
                //document.body.appendChild(ele);

                //$("<img src="+ url +"></img>").appendTo("img"+j);

            });
            }
            //$("#img"+i).html("<img src="+ url + "></img>");

});

Answer 1

You basically need to keep track of the order that you are appending your images to the DOM, and make sure that they are in sync with the letters in the name. Created a fiddle with a fix. Comments are in line:

http://jsfiddle.net/84nv2dmL/2/

function getQueryStringVar(name) {
    var qs = window.location.search.slice(1);
    var props = qs.split("&");
    for (var i = 0; i < props.length; i++) {
        var pair = props[i].split("=");
        if (pair[0] === name) {
            return decodeURIComponent(pair[1]);
        }
    }
}

function getLetterImage(tag) {

    var flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

    return $.getJSON(flickerAPI, {
            tags: tag.char,
            tagmode: "all",
            format: "json"
        })
        .then(function(flickrdata) {
            //console.log(flickrdata);
            var i = Math.floor(Math.random() * flickrdata.items.length);
            var item = flickrdata.items[i];
            var url = item.media.m;
            // return an object with url AND index
            return {
                ind: tag.ind,
                img: url
            };
        });
}



$(document).ready(function() {
    var name = getQueryStringVar("name") || "Derek";
    var urls = new Array(name.length); // array or URLs, in correct order
    var urlCounter = []; // keeps count or URLs received
    var str = "letter,";
    var searchtags = new Array();
    for (var i = 0; i < name.length; i++) {
        searchtags[i] = {
            char: str.concat(name.charAt(i)),
            ind: i
        };
    }
    for (var j = 0; j < name.length; j++) {
        var request = getLetterImage(searchtags[j]);
        request.done(function(url) {
            // when request is done, place image url in 'urls' array, in the correct order
            urls[url.ind] = url.img;

            // push object to the counter array, just to keep count
            urlCounter.push(url);

            // check if all image urls have been collected
            checkComplete();
        });

    }

    function checkComplete() {

        // if the number of URLs received is equal
        // to the number of characters in the name
        // append the images from the ordered array
        if (urlCounter.length == name.length) {
            for (var k = 0; k < urls.length; k++) {
                $("body").append("<img src=" + urls[k] + "></img>");
            }
        }
    }

});