CODEWITHSUNDEEP
jqueryloopseach
onbids
onbids

Reputation: 53

jQuery each loop won't work with json data

i have a set of jSon data (error-free) wich i need to loop with the $.each function, but it display only the last data record from jSon.

This is the jquery i have for:

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

So thejSon data are a set with 15 records eg this:

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

For the record, with this piece of code it displays only the last record!

Does anyone know where the problem is?

Thanks, regards.

Upvotes: 4

Views: 583

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

This will work

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

}

Upvotes: 0

bobince
bobince

Reputation: 536349

As Tom said, you're repeatedly overwriting, not appending to, the HTML.

In general, however, writing HTML markup from JavaScript isn't a good idea. If, for example, the sender string can contain HTML-special characters like <, then you've just given yourself a client-side HTML-injection vulnerability.

jQuery gives you some good tools to make direct access to DOM nodes easy. Use them and you can end up with more maintainable as well as more secure code. eg.

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

Upvotes: 1

Anoop
Anoop

Reputation: 23208

value is same as 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();

}

Upvotes: 0

Exception
Exception

Reputation: 8379

Because you are overwriting all li s HTML every time. You can use eq to make the same code work. And use $.getJSON it is easy to use for JSON data and it is enough for your requirement.

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

});

Upvotes: 1

Related Questions