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

我在当前项目中使用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中的for-img”逻辑，我只是以前从未处理过。我怎么能一个接一个地对“imgs”数组的内容发出“警报”谢谢

嗯，目前它只是一个字符串。顺便说一句，你的格式是“错误的”——你混合了数组和对象（错误的，除非你想在一个对象->三维的内部有一个对象数组）

我建议使用：

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

slides=JSON.parse（幻灯片）//将JSON字符串解析为一个对象

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

或者通过数组方式：

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

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

后者需要对象中的对象才能工作（如1.建议）

根据小提琴，这里有一个修改显示了一种方式：

---

（如果您只需要一个简单的数组，那么您可以将其放入一个纯数组中，而不是首先使用imgs——jQuery检查{or[并将自动为您解析它）.

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

当数据属性是对象（以“{”）或数组（以“[”开头）时，则使用

jQuery.parseJSON

来解析字符串；它必须遵循有效的JSON语法，包括带引号的属性名。如果该值不能解析为JavaScript值，则保留为字符串

我制作了一个小提琴，它的基本用途如下：

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

---

请确保在属性中使用有效的JSON。它看起来像是要使用：

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

如果可以将JSON值成功解析为对象，则将自动将其转换为对象，以便在集合中进行迭代，您可以使用：

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

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

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

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

---

谢谢Ken！我怎么能简单地“提醒”每个图像的值，这就是我一直坚持的！谢谢！谢谢Ken，很棒的东西。如果更简单的话，我正在使用jQuery！getDataSlides有必要吗？它做什么呢？如果你能帮我指出正确的方向，

.data（）是否

method automatically parse JSON？@Halcyon21我更新了fiddle（参见答案中的链接）。数据似乎是使用jquery自动解析的。是的，我的错在这一点上，我是JSON新手。

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

<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');

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

$.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);
});