Question

我正在尝试使用Javascript（jQuery）循环出一个JSON对象。主JSON对象数组中的每个对象都包含包含标记的嵌入数组。

我想循环遍历主对象中的所有文件，同时循环遍历标记并将它们与文件一起输出。在循环之前解析对象。

这是JSON对象：

{
    "result": [
        {
            "id": "4f26f21f09ab66c103000sd00e",
            "file_url": "http://thefilesat.s3.amazonaws.com/81/0000/12.jpg",
            "tags": [
                "image",
                "elephants"
            ]
        },
        {
            "id": "4f2422c509ab668472000005",
            "file_url": "http://thefilesat.s3.amazonaws.com/9d/0000/7.jpg",
            "tags": [
                "image",
                "green",
                "tree"
            ]
        }
    ]
}

尝试了这段代码，但它不起作用：

for (var i=0; i < parsed.result.length; i++) {

for (var j=0; j < parsed.result[i].tags.length; j++) {

    tags = '<div class="tag">' + parsed.result[j].tags[j] + '</div>';

};

html = '<div class="file""><img src="' + parsed.result[i].file_url + '" /><div class="tags">' + tags + '</div></div>';

$("#files").append(html);

};

Answer 1

你的问题是在tag循环中，你正在使用=运算符;这会覆盖你在每次迭代中分配的变量。

相反，尝试这样的事情;

var html = '';

for (var i = 0; i < parsed.result.length; i++) {
    var tags = '';

    for (var j = 0; j < parsed.result[i].tags.length; j++) {
        tags += '<div class="tag">' + parsed.result[i].tags[j] + '</div>';
    };

    html += '<div class="file""><img src="' + parsed.result[i].file_url + '" /><div class="tags">' + tags + '</div></div>';
};

$("#files").append(html);

您还有parsed.result[j].tags[j]而不是parsed.result[i].tags[j]。

我还将$('#files')附加到了循环之外，所以它只发生一次，以减少DOM查找和DOM操作的数量（因为这很慢（相对而言））。< / p>

Answer 2

使用：

parsed.result[j].tags[j]

我认为你的意思是：

parsed.result[i].tags[j]

此外，tags =应为tags +=，否则您只会覆盖之前的代码。

Answer 3

你有一个拼写错误，第3行必须是：

tags = '<div class="tag">' + parsed.result[i].tags[j] + '</div>';

（使用结果[i] 而不是 j ）

Answer 4

当您处理对象和数组时，存储对数组的额外引用非常便宜：

var result = parsed.result; // new

for (var i=0; i < result.length; i++) {

    var tags = result[i].tags;  // new

    for (var j = 0; j < tags.length; j++) {
        tags += '<div class="tag">' + tags[j] + '</div>';
    }

    html = '<div class="file""><img src="' + result[i].file_url + '" /><div class="tags">' + tags + '</div></div>';
    $("#files").append(html);
};

此时您无意中将索引i两次包含在最内层的引用中这一事实变得不可能。

这实际上也表现得更好，因为解释器不必一遍又一遍地反复引用整个属性链。

FWIW，一种更简洁的jQuery编写方式，不使用.html()方法就是：

var result = parsed.result; // new
for (var i=0; i < result.length; i++) {

    var div = $('<div>', {'class': 'file'})
        .append('<img>', {src: result[i].file_url });

    var tags = result[i].tags;  // new
    for (var j = 0; j < tags.length; j++) {
       $('<div>', {'class': 'tag', text: tags[j]}).appendTo(div);
    }

    $("#files").append(div);
};

避免所有字符串连接，并引用标记转义，并确保标记中的任何HTML特殊字符都被正确转义等。

Javascript和JSON。子阵列的循环失败

4 个答案: