DauntlessRob DauntlessRob - 1 month ago 9
Javascript Question

$.each is repeating the same entries multiple times

I'm building an App in Phonegap (cordova), and including jquery. For some reason if I add any html elements to

append
while in
$.each
, it starts to duplicate all of the entries in my object.



var prof = {"charID":1,"powers":{"125":{"powerID":125,"name":"Cosmic Awareness","rank":100,"id":234,"charID":1},"151":{"powerID":151,"name":"Body Resistance","rank":20,"id":4,"charID":1},"201":{"powerID":201,"name":"Mass Increase","rank":36,"id":2,"charID":1},"202":{"powerID":202,"name":"Phasing","rank":26,"id":10,"charID":1},"237":{"powerID":237,"name":"Gravity Generation","rank":36,"id":3,"charID":1}},"talents":{"2":{"talentID":2,"name":"Thrown Weapons","rank":1,"id":229,"charID":1},"9":{"talentID":9,"name":"Weapons Specialist","rank":1,"id":228,"charID":1},"10":{"talentID":10,"name":"Martial Arts A","rank":1,"id":4,"charID":1},"13":{"talentID":13,"name":"Martial Arts D","rank":1,"id":5,"charID":1},"16":{"talentID":16,"name":"Thrown Objects","rank":1,"id":230,"charID":1},"29":{"talentID":29,"name":"Detective/Espionage","rank":1,"id":2,"charID":1},"36":{"talentID":36,"name":"Computers","rank":1,"id":1,"charID":1},"39":{"talentID":39,"name":"Sleight of Hand","rank":1,"id":250,"charID":1},"50":{"talentID":50,"name":"Leadership","rank":1,"id":3,"charID":1},"51":{"talentID":51,"name":"Zero-G Training","rank":1,"id":6,"charID":1},"52":{"talentID":52,"name":"Zero-G Combat","rank":1,"id":7,"charID":1}}};

$.each(prof.powers, function(id, powa) {
$('#pvPowerList div').append('<div class="row">');
$('#pvPowerList div').append(powa.name);
$('#pvPowerList div').append('</div>');
});

.row {display:block; clear:both;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="pvPowerList">
<div>
</div>
</div>





If I remove the html, and only do
$('#pvPowerList div').append(powa.name);
then it lists them out correctly.

What am I donig wrong? why is it acting like that?

Nit Nit
Answer

On each iteration you are adding a div into #pvPowerList, then you select all the divs again, including the one you just created and append to that one and so on.
Also, .append doesn't support leaving tags open.
The following should fix your issue:

var prof = {"charID":1,"powers":{"125":{"powerID":125,"name":"Cosmic Awareness","rank":100,"id":234,"charID":1},"151":{"powerID":151,"name":"Body Resistance","rank":20,"id":4,"charID":1},"201":{"powerID":201,"name":"Mass Increase","rank":36,"id":2,"charID":1},"202":{"powerID":202,"name":"Phasing","rank":26,"id":10,"charID":1},"237":{"powerID":237,"name":"Gravity Generation","rank":36,"id":3,"charID":1}},"talents":{"2":{"talentID":2,"name":"Thrown Weapons","rank":1,"id":229,"charID":1},"9":{"talentID":9,"name":"Weapons Specialist","rank":1,"id":228,"charID":1},"10":{"talentID":10,"name":"Martial Arts A","rank":1,"id":4,"charID":1},"13":{"talentID":13,"name":"Martial Arts D","rank":1,"id":5,"charID":1},"16":{"talentID":16,"name":"Thrown Objects","rank":1,"id":230,"charID":1},"29":{"talentID":29,"name":"Detective/Espionage","rank":1,"id":2,"charID":1},"36":{"talentID":36,"name":"Computers","rank":1,"id":1,"charID":1},"39":{"talentID":39,"name":"Sleight of Hand","rank":1,"id":250,"charID":1},"50":{"talentID":50,"name":"Leadership","rank":1,"id":3,"charID":1},"51":{"talentID":51,"name":"Zero-G Training","rank":1,"id":6,"charID":1},"52":{"talentID":52,"name":"Zero-G Combat","rank":1,"id":7,"charID":1}}};

var target = $('#pvPowerList > div');
$.each(prof.powers, function(id, powa) {
  target.append('<div class="row">' + powa.name + '</div>');
});
.row {display:block; clear:both;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="pvPowerList">
  <div>
  </div>
</div>