Geek Answers Handbook

JQuery every loop will not work with json data

I have a set of jSon data (no errors) that I need to execute using the $ .each function, but it only displays the last data record from jSon.

This is jquery 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(); }); } });

Thus, jSon data is a set of 15 records, for example:

 [{"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 a record with this part of the code, only the last record is displayed!

Does anyone know where the problem is?

Thanks Hi.

+4
source share
4 answers

Because every time you rewrite all li HTML. You can use eq to do the same code. And use $.getJSON , it's easy to use for JSON data, and that's 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(); }); }

});

+1
source

As Tom said, you rewrite, not add HTML.

In general, however, writing HTML markup with JavaScript is not a good idea. If, for example, the sender string may contain special HTML characters such as < , then you just got a client-side HTML injection vulnerability.

jQuery provides you with good tools for easy access to DOM nodes. Use them and you can get more convenient 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}) ); } }
+1
source

It 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(); }
0
source

the value is the 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(); }
0
source

More articles:


All Articles