jQuery loop through array by appending div

Question

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>

Ehsan Sajjad · Accepted Answer · 2014-06-12 15:55:55Z

2

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

answered Jun 12, 2014 at 15:55

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Praveen Reddy · Accepted Answer · 2014-06-12 15:57:24Z

1

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

 }

answered Jun 12, 2014 at 15:57

Praveen Reddy

7,4133 gold badges25 silver badges45 bronze badges

Comments

MrCode · Accepted Answer · 2014-06-12 15:58:17Z

1

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.

edited Jun 12, 2014 at 15:58

answered Jun 12, 2014 at 15:52

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Comments

AppleBud · Accepted Answer · 2014-06-12 16:02:30Z

1

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.

answered Jun 12, 2014 at 16:02

AppleBud

1,5418 gold badges31 silver badges49 bronze badges

Comments

Melvinr · Accepted Answer · 2014-06-12 16:05:51Z

1

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

answered Jun 12, 2014 at 16:05

Melvinr

5342 silver badges8 bronze badges

Collectives™ on Stack Overflow

jQuery loop through array by appending div

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related