load images from array in json

Question

Not sure why this is not loading. Any help would be great.

//images.json

{  
 "images": [
  {"title": "Image One", "url": "image1.jpg"},
  {"title": "Image Two", "url": "image2.jpg"},
  {"title": "Image Three", "url": "image3.jpg"}
 ]
}

//application.js

function loadImages(url, container) {
    //get the JSON object
    $.getJSON(url, function (data) {
        if (typeof data === 'object') {
            $.each(data['images'], function (key, image) {
                var mylist = '<li><img src="' + image['url'] + '" alt="' + image['title'] + '"></li>';
                $(body).append(mylist);
            });
        }
    });
};


 $(function(){
     loadImages('images.json', '#mylist');
  });

//html

 <ul id="mylist"></ul>

Answer 1

It should be:

$(container).append(mylist);

Answer 2

You need one level more loop:

$.each(data, function (key, image) {
    $.each(image, function(i,val){
        var mylist = '<li><img src="' + val.url + '" alt="' + val.title + '"></li>';
        $('body').append(mylist);
    })
});

Of course, if you wanna append to container, change $('body') to $(container)

Answer 3

There's nothing like $(body), it should be $('body'). Also in your case it must be $(container)

Answer 4

You've missed the quotes here:

$(body).append(mylist); 

It should be:

$('body').append(mylist);