Question

我在当前项目中使用jQuery，我基本上想为JSON数组中的每个图像src动态创建一个图像，这里是HTML数据 - * JSON数组：

<div class="" data-slides='{
    "imgs" : [{
    "img" : "//placekitten.com/g/200/300",
    "img" : "//placekitten.com/g/200/300",
    "img" : "//placekitten.com/g/200/300",
}]}'>

我想有一些'img in imgs'逻辑需要，我以前从未处理过它。我怎么能一个一个地“警告”'imgs'数组的内容？ :)谢谢！

Answer 1

嗯，目前它只是一个字符串。您的格式是“错误的”btw-您正在混合数组和对象（错误除非您想要一个对象内的对象数组 - ＆gt; 3维）。

我建议使用：

<div class="" data-slides='{
    "imgs" : {
    "img1" : "//placekitten.com/g/200/300",
    "img2" : "//placekitten.com/g/200/300",
    "img3" : "//placekitten.com/g/200/300"
}}'>

或：

<div class="" data-slides='{
    "imgs" : [
    "//placekitten.com/g/200/300",
    "//placekitten.com/g/200/300",
    "//placekitten.com/g/200/300"
]}'>

假设您将内容解压缩到var：

var slides = $('div').data('slides'); // or use id instead of div

~~slides = JSON.parse（slide）; //将JSON字符串解析为对象~~

现在你可以通过（第一种方式）访问它们：

var key;
for(key in slides.imgs)
    alert(slides.imgs[key]);

或通过数组方式：

for(var i = 0, img; img = slides.imgs[i]; i++)
    alert(img);

或通过第三种方式（作为单独的解决方案）：

alert($('div').data('slides').imgs.img1);

后者需要一个物体对象才能工作（作为1.推荐）。

基于小提琴，这是一个修改，显示一种方式：
http://jsfiddle.net/Evcwx/1/

（如果你需要一个简单的数组，你可以在那里放入一个纯数组，而不是先使用imgs - jQuery检查{或[并将自动为你解析它。）

Answer 2

我完全同意@Ken你应该使用更好的JSON结构。如果您使用的是jQuery，则可以直接使用data()来获取已解析的对象。引用文档：

当data属性是一个对象（以'{'开头）或数组（以'['开头）时，jQuery.parseJSON用于解析字符串;它必须遵循有效的JSON语法，包括引用的属性名称。如果该值不能作为JavaScript值进行解析，则将其保留为字符串。

所以我创建了一个小小提琴here，基本上使用data()如下：

var slides = $("#slider").data("slides");

Answer 3

请务必在您的属性中使用有效的JSON。看起来你打算使用：

<div class="" data-slides='{
    "imgs" : [
        {"img": "//placekitten.com/g/200/300"},
        {"img": "//placekitten.com/g/200/300"},
        {"img": "//placekitten.com/g/200/300"}
    ]
}'>

可以使用以下方式访问：

var slides = $('[data-slides]').data('slides');

.data() method会自动将JSON值转换为对象，如果它们可以成功解析为对象，那么迭代可以使用的集合：

var index;
for (index in slides.imgs) {
    alert(slides[index].img);
}

或者用于迭代集合的“jQuery方式”（使用jQuery.each）：

$.each(slides.imgs, function () {
    alert(this.img);
});

总而言之，原始结构非常冗长，它可以简化为单个数组：

<div class="" data-slides='[
    "//placekitten.com/g/200/300",
    "//placekitten.com/g/200/300",
    "//placekitten.com/g/200/300"
]'>

将迭代为：

var slides = $('[data-slides]').data('slides');
$.each(slides, function () {
    alert(this);
});

如何获取嵌套JSON数组的值？

3 个答案: