4

$.each関数でループする必要がある一連のjSonデータ(エラーなし)がありますが、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"}]

記録のために、このコードでは、最後のレコードのみが表示されます!

問題がどこにあるか誰か知っていますか？

ありがとうございます。それでは、お元気で。

4

4 に答える 4

1

li毎回すべての 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();
     });
}

});

于 2012-12-29T11:44:49.673 に答える
1

トムが言ったように、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})
        );
    }
}
于 2012-12-29T12:01:40.487 に答える
0

これはうまくいきます

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

}
于 2012-12-29T11:45:38.510 に答える
0

値は 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();

}
于 2012-12-29T11:48:46.853 に答える