当前位置: 动力学知识库 > 问答 > 编程问答 >

json - jquery.each function duplicates items for each iteration

问题描述:

I'm getting a bunch of data from a JSON file that I display on a page and everything works great except that each item looped over gets duplicated for every iteration.

I know this is something silly but my googling is not working today so I can't find an answer.

When I log the block variable I get the response I am looking for but as I mentioned, it gets duplicated when I append the data so the problem must lie there.

Thanks for any help.

$.ajax({

url: url,

dataType: 'json',

success: function(data, status) {

$('#tp-header h2').html(data.TrustScore.Human);

$('#tp-header img').attr('src', data.TrustScore.StarsImageUrls.large);

$('#tp-header span').html(data.ReviewCount.Total);

$.each(data.Reviews, function(key, val) {

var me = this;

$.each(val, function(i, j) {

var stars = me.TrustScore.StarsImageUrls.small;

var date = me.Created.HumanDate;

var title = me.Title;

var content = me.Content;

var avatar = me.User.ImageUrls.i24;

var name = me.User.Name;

var block = '<div class="review">' +

'<div class="stars"><img src="' + stars + '" class="stars" /></div>' +

'<div class="date">' + date + '</div>' +

'<div class="clearfix"></div>' +

'<h3>' + title + '</h3>' +

'<p>' + content + '</p>' +

'<div class="profile"><i><img src="' + avatar + '" /></i>' +

'<span>' + name + '</span>' +

'</div></div>';

$(block).appendTo('#tp-body');

});

});

},

error: function(XHR, txtStatus, errThrown) {

console.log('Error: ' + txtStatus);

console.log('Error: ' + errThrown);

}

});

JSON snippet

{

"Categories":[ ],

"DomainName":"company.net",

"FeedUpdateTime":{ },

"ReviewCount":{ },

"ReviewPageUrl":"http://example.com",

"Reviews":[

{

"Created":{

"UnixTime":1405970056,

"Human":"21 July 2014 19:14:16 GMT",

"HumanDate":"21. Jul"

},

"Title":"An easy an enjoyable way to earn money",

"Content":"Some message",

"TrustScore":{

"Score":100,

"Stars":5,

"Human":"Excellent",

"StarsImageUrls":{

"large":"//stars/l/5.png",

"medium":"//stars/m/5.png",

"small":"//stars/s/5.png"

}

},

"CompanyReply":"",

"User":{

"Name":"Sofia Chinea",

"City":null,

"Locale":"en-GB",

"ReviewCount":1,

"IsVerified":false,

"HasImage":false,

"ImageUrls":{

"i24":"//s3-eu-west-1.amazonaws.com/images/CloudImages/User/0/24x24.png",

"i35":"//s3-eu-west-1.amazonaws.com/images/CloudImages/User/0/35x35.png",

"i64":"//s3-eu-west-1.amazonaws.com/images/CloudImages/User/0/64x64.png",

"i73":"//s3-eu-west-1.amazonaws.com/images/CloudImages/User/0/73x73.png"

}

},

"Url":"http://www.example.com",

"IsVerified":false

},

}

网友答案:

Your problem is with your iterations:

  $.each(data.Reviews, function (key, val) {
      var me = this; // 'this' is the same as val

      $.each(val, function (i, j) { // you actually iterate over the 'me' variable here
          var stars = me.TrustScore.StarsImageUrls.small;
          var date = me.Created.HumanDate;
          var title = me.Title;
          var content = me.Content;
          var avatar = me.User.ImageUrls.i24;
          var name = me.User.Name;

          var block = '<div class="review">' +
              '<div class="stars"><img src="' + stars + '" class="stars" /></div>' +
              '<div class="date">' + date + '</div>' +
              '<div class="clearfix"></div>' +
              '<h3>' + title + '</h3>' +
              '<p>' + content + '</p>' +
              '<div class="profile"><i><img src="' + avatar + '" /></i>' +
              '<span>' + name + '</span>' +
              '</div></div>';

          $(block).appendTo('#tp-body');
      });
    });

You see how you iterate over yourself.

Could you show an example of the data response you are getting so we can see what you are expecting to iterate over?

EDIT

It looks like you are iterating over each field of a Review on your 2nd loop, I don't quite know the purpose of the 2nd loop, I think you can just remove the loop and use the code inside that loop in your 1st loop. Like so:

  $.each(data.Reviews, function (key, val) {
      var me = this;

      var stars = me.TrustScore.StarsImageUrls.small;
      var date = me.Created.HumanDate;
      var title = me.Title;
      var content = me.Content;
      var avatar = me.User.ImageUrls.i24;
      var name = me.User.Name;

      var block = '<div class="review">' +
          '<div class="stars"><img src="' + stars + '" class="stars" /></div>' +
          '<div class="date">' + date + '</div>' +
          '<div class="clearfix"></div>' +
          '<h3>' + title + '</h3>' +
          '<p>' + content + '</p>' +
          '<div class="profile"><i><img src="' + avatar + '" /></i>' +
          '<span>' + name + '</span>' +
          '</div></div>';

      $(block).appendTo('#tp-body');
  });

and to make that look abit better, since you are using the variables just once, it is quite useless to make variables of them:

  $.each(data.Reviews, function (key, val) {
      var block = '<div class="review">' +
          '<div class="stars"><img src="' + val.TrustScore.StarsImageUrls.small + '" class="stars" /></div>' +
          '<div class="date">' + val.Created.HumanDate + '</div>' +
          '<div class="clearfix"></div>' +
          '<h3>' + val.Title + '</h3>' +
          '<p>' + val.Content + '</p>' +
          '<div class="profile"><i><img src="' + val.User.ImageUrls.i24 + '" /></i>' +
          '<span>' + val.User.Name + '</span>' +
          '</div></div>';

      $(block).appendTo('#tp-body');
  });
分享给朋友:
您可能感兴趣的文章:
随机阅读: