在jQuery文档中解析JSON

Question

我有一个使用JSON文件作为输入的jQuery函数。 我需要将JSON数据移动到相同的jQuery文件中。 抱歉，我对使用JSON的了解有限。 我确定这是一个简单的解决方法。

这是我现在拥有的代码。 这段代码可以完美地工作：

$.getJSON('assets/images.json', function(data) {
    var item = data.images[Math.floor(Math.random()*data.images.length)];
    $('.tile-wrap .left').css({'background': 'url(assets/' + item.image + ')' + 'no-repeat center center'});
    $('<p>' + item.caption + '</p>').appendTo('.caption');
});

如您所见，该代码段引用了带有.getJSON的JSON文件。 如前所述，我想将JSON数据移到同一脚本中。

这是我尝试过的方法，但似乎不起作用：

    var imagedata = {
        "images": [{
            "image": "hero-bg.jpg",
            "caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        }, {
            "image": "group.jpg",
            "caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        }, {
            "image": "hero-bg.jpg",
            "caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        }, {
            "image": "hero-bg.jpg",
            "caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        }]
    };

$.parseJSON(imagedata, function(data) {
    var item = data.images[Math.floor(Math.random() * data.images.length)];
    $('.tile-wrap .left').css({
        'background': 'url(assets/' + item.image + ')' + 'no-repeat center center'
    });
    $('<p>' + item.caption + '</p>').appendTo('.caption');
});

就像我说的那样，对于我有限的JSON知识，这可能是一个简单的修复方法，因此深表歉意。

Answer 1

您现在不再需要处理JSON，因为您现在有了对象文字而不是JSON字符串。

只需完全摆脱getJSON和parseJSON并在与imagedata使用的地方替换data 。

var imagedata = {
    "images": [{
        "image": "hero-bg.jpg",
        "caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    }, {
        "image": "group.jpg",
        "caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    }, {
        "image": "hero-bg.jpg",
        "caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    }, {
        "image": "hero-bg.jpg",
        "caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    }]
};

var item = imagedata.images[Math.floor(Math.random() * imagedata.images.length)];
$('.tile-wrap .left').css({
    'background': 'url(assets/' + item.image + ')' + 'no-repeat center center'
});
$('<p>' + item.caption + '</p>').appendTo('.caption');

如果实际上是json的样子，则您甚至可以简化它，只拥有一个没有imagedata包装器对象的images数组。 如下：

var images =[{
    "image": "hero-bg.jpg",
    "caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}, {
/* ... */  
}];

var item = images[Math.floor(Math.random() * images.length)];
$('.tile-wrap .left').css({
    'background': 'url(assets/' + item.image + ')' + 'no-repeat center center'
});
$('<p>' + item.caption + '</p>').appendTo('.caption');