CODEWITHSUNDEEP
javascriptjqueryappend
eternal
eternal

Reputation: 99

jQuery loop through array by appending div

This is probably something simple, but I can't figure it out. Thanks! http://jsfiddle.net/8DGgg/1/

  var listP ={"PEOPLE": [
       {  "name": "Joe",  "age": "1"  },
       {  "name": "Jim",  "age": "2" },
       {  "name": "Jessica",  "age": "3" }
       ]};


 for(var j in listP.PEOPLE) { 
     $("#dir").append( "<div class=\"whoWrap\">" );
     $(".whoWrap").append( listP.PEOPLE[j].name + " " + j );
     $("#dir").append("</div>");
    }

Desired result:

  <div id="dir">
      <div class="whoWrap">Joe 0</div>
      <div class="whoWrap">Jim 1</div>
      <div class="whoWrap">Jessica 2</div>
      </div>

Actual result:

      <div id="dir">
          <div class="whoWrap">Joe 0Jim 1Jessica 2</div>
          <div class="whoWrap">Jim 1Jessica 2</div>
          <div class="whoWrap">Jessica 2</div>
      </div>

Upvotes: 0

Views: 2534

Answers (5)

Melvinr
Melvinr

Reputation: 534

Yes, the problem is that you append content to this class $(".whoWrap") so It'll match all of them.

Here is your jsfiddle working http://jsfiddle.net/mrodriguezr/8DGgg/4/

$(document).ready(function(){

   var listP ={"PEOPLE": [
           {  "name": "Joe",  "age": "1" },
           {  "name": "Jim",  "age": "2"  },
           {  "name": "Jessica",  "age": "3"}
           ]};

 for(var j in listP.PEOPLE) { 
      var $whoDiv = $('<div>', {'class' : 'whoWrap'}).append(listP.PEOPLE[j].name + " " + j );

      $("#dir").append($whoDiv);
      $("#dir").append($whoDiv);
    }
});

Upvotes: 1

AppleBud
AppleBud

Reputation: 1541

Try this:

   $(document).ready(function(){

   var listP ={"PEOPLE": [{  "name": "Joe",  "age": "1" },{  "name": "Jim",  "age": "2"  },{  "name": "Jessica",  "age": "3"}]};


      for(var j in listP.PEOPLE) { 
          var whoWrap=$('<div class=\"whoWrap\"></div>');

         whoWrap.append( listP.PEOPLE[j].name + " " + j );
         $("#dir").append(whoWrap);

    }


    });

Hope it helps.

Upvotes: 1

MrCode
MrCode

Reputation: 64526

It's because the .whoWrap selector matches all previous elements that have already been appended in previous iterations. To resolve, reduce the elements using .last().

Also it would be a good idea to add #dir to the selector so it only targets elements within that.

 $("#dir > .whoWrap").last().append( listP.PEOPLE[j].name + " " + j );

The whole thing would be better written as:

$.each(listP.PEOPLE, function(index){
    $("#dir").append(
        $('<div>')
            .addClass('whoWrap')
            .text(this.name + " " + index)
    );
});

FIDDLE

  • Working with DOM elements (or jQuery objects) is better than dealing with raw HTML.
  • For in loops have issues when looping arrays, use jQuery $.each or a basic for loop.

Upvotes: 1

Praveen Reddy
Praveen Reddy

Reputation: 7383

$(".whoWrap") selected all div's whose class matched. Hence causing the duplication. Modify your code as below.

Fiddle here : http://jsfiddle.net/CodingDawg/8DGgg/2/

for (var j in listP.PEOPLE) {
   var div = "<div class='whoWrap'>" + listP.PEOPLE[j].name + " " + j + "</div>"
   $("#dir").append(div);

 }

Upvotes: 1

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

you have to do this way:

for(var j in listP.PEOPLE) { 

 $("#dir").append( "<div class=\"whoWrap\">"+listP.PEOPLE[j].name + " " + j +"</div>" );

 $("#dir").append("</div>");

}

you don't need to append in whoWrap just append in same dir div and it will be fine.

UPDATED FIDDLE

Upvotes: 2

Related Questions