Question

不确定为什么不加载。任何帮助都会很棒。

// 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

应该是：

$(container).append(mylist);

Answer 2

你错过了这里的引用：

$(body).append(mylist);

应该是：

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

Answer 3

没有$(body)，它应该是$('body')。在您的情况下，它必须是$(container)

Answer 4

你需要一个级别的循环：

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

当然，如果你想附加到容器，将$（'body'）更改为$（容器）

从json中的数组加载图像

4 个答案: