jQuery的each循环不能处理JSON数据。

Question

我有一组JSON数据（无错误），我需要使用$.each函数循环遍历，但它只显示JSON中的最后一个数据记录。

这是我的jQuery代码：

$.ajax({
type: "POST",
url: '/update-recent-stat',
dataType: 'json',
success: function(jsonData)
    {
        var counterjson = 1;

        $.each(jsonData, function(i, value){
            var count = counterjson++;
            var link = jsonData[count].linkid;
            var time = jsonData[count].time;
            var value = jsonData[count].value;
            var sender = jsonData[count].sender;

           $("#DownBoxL ul li").html("<div class=Timestamp>"+time+"</div><div class=UserName><a href=\"#"+link+"\">"+sender+"</a> ("+count+") msg sent!</div><div class=TagValue>+"+value+"</div>").show();
         });
    }
});  

所以JSON数据是一个包含15条记录的集合，例如这个：

[{"counter":"1","linkid":"1448524027","sender":"User1","value":"5","time":"5 sec ago"},{"counter":"2","linkid":"1448524027","sender":"User2","value":"5","time":"5 min ago"}]

记录一下，这段代码只显示最后一条记录！

有人知道问题出在哪里吗？

谢谢，问候。

- onbids

---

理解起来，那里有什么好笑的？ - onbids

这就像JavaScript对象表示法一样的JSON，但jSon让我联想到JavaScript的儿子或类似的东西，现在不好笑，但在喝了三杯咖啡后读起来很有趣；）难以解释：D但几乎喷出了我的第三杯:) - Roko C. Buljan

顺便说一下，你应该真正考虑接受最有帮助的答案。欢迎来到 SO。 - Roko C. Buljan

Answer 1

因为每次都覆盖所有的

HTML，所以您可以使用eq来使相同的代码工作。并且使用$.getJSON对于JSON数据易于使用，并且足以满足您的要求。

$.getJSON('/jsonurl/file.json', function(jsonData)
{
   var counterjson = 1;

   $.each(jsonData, function(i, value){
        var count = counterjson++;
        var link = jsonData[count].linkid;
        var time = jsonData[count].time;
        var value = jsonData[count].value;
        var sender = jsonData[count].sender;

        $("#DownBoxL ul li:eq(" + i + ")).html("<div class=Timestamp>"+time+"</div><div class=UserName><a href=\"#"+link+"\">"+sender+"</a> ("+count+") msg sent!</div><div class=TagValue>+"+value+"</div>").show();
     });
}

});

- Exception

Answer 2

正如Tom所说，您正在重复覆盖HTML而不是添加。

然而，总的来说，使用JavaScript编写HTML标记并不是一个好主意。例如，如果sender字符串包含类似于<这样的HTML特殊字符，那么您刚刚给自己创建了一个客户端HTML注入漏洞。

jQuery为您提供了一些很好��工具，使直接访问DOM节点变得更容易。使用它们，您可以得到更易于维护和更安全的代码。例如：

success: function(jsonData) {
    $.each(jsonData, function(i, value){
        $('#DownBoxL ul li').append(
            $('<div class="Timestamp">', {text: value.time})
        ).append(
            $('<div class="UserName">').append(
                $('<a>', {href: '#'+value.linkid, text: value.sender})
            ).append(' ('+i+') msg sent!')
        ).append(
            $('<div class="TagValue">', {text: value.value})
        );
    }
}

- bobince

---

@异常：那是你的猜测，但并不总是innerHTML比DOM调用更快地将内容放入文档 - 这非常取决于你正在做什么。当你一次性插入数百个相邻的子节点时（通常是表格中的行），准备HTML标记是有意义的情况，即使这样，你也不能（轻松/可靠地）执行追加操作，只能一次性替换整个内容。除非你真的非常需要这样做，否则最好不要这样做，因为你必须投入大量的工作来手动进行HTML转义，以避免注入漏洞。 - bobince

Answer 3

这将会起作用

success: function(jsonData)
{
    var count= 1;
    var htmlData = '';

    $.each(jsonData, function(i, value){

        count++;
        var link = jsonData[count].linkid;
        var time = jsonData[count].time;
        var value = jsonData[count].value;
        var sender = jsonData[count].sender;

       htmlData += "<div class=Timestamp>"+time+"</div><div class=UserName><a href=\"#"+link+"\">"+sender+"</a> ("+count+") msg sent!</div><div class=TagValue>+"+value+"</div>";
     });

     $("#DownBoxL ul li").html( htmlData ).show();

}

- Roko C. Buljan

---

看起来他试图在每次迭代中将内容附加到li上。使用您的代码，它将在ul中的所有li中附加相同的HTML。 - Exception

Answer 4

value的值与jsonData[i]相同;

success: function(jsonData)
{
    var htmlData = '';
    $.each(jsonData, function(i, value){    
       htmlData += "<div class=Timestamp>"+value.time+"</div><div class=UserName><a href=\"#"+value.link+"\">"+value.sender+"</a> ("+ ( i+1 ) +") msg sent!</div><div class=TagValue>+"+value.value+"</div>";
     });

     $("#DownBoxL ul li").html( htmlData ).show();

}

- Anoop