CODEWITHSUNDEEP
javascriptjquery
jonny
jonny

Reputation: 3098

jQuery DOM maniuplation acting strangely inside a forEach loop

I have a forEach loop iteraing over an array of objects. With each iteration of the loop, I create a node and append it to the DOM tree using jQuery.

However it appears that updating the inner text of these DOM nodes using jQuery is causing me some issues - it's using the same value with each iteration.

My code is as follows: 

var specs = [{
  "name": "E5 4603 v2",
  "cores": 4,
  "threads": 8,
  "base": 2.2,
  "turbo": 2.2,
  "price": 1000
}, {
  "name": "E5 4603 v2",
  "cores": 4,
  "threads": 8,
  "base": 2.2,
  "turbo": 2.2,
  "price": 1200
}, {
  "name": "E5 4603 v2",
  "cores": 4,
  "threads": 8,
  "base": 2.2,
  "turbo": 2.2,
  "price": 1500
}];

specs.forEach(function(elem) {
  var text = "\
	<div class='product'>\
	    <span class='name'></span>\
	    <span class='price'></span>\
	</div>";
  var append = $("#processor").append(text);
  $(append).find(".price").text(elem.price);            //Pretty sure my problem lies here
  $("#middle").append("<div>" + elem.price + "</div>"); //Can't figure it out though.
});
#left,
#middle,
#right {
  display: inline-block;
  margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
  <div id="processor" class="prodcat">
    <div class="main"></div>
  </div>
  <div id="harddrive" class="prodcat">
    <div class="main"></div>
  </div>
</div>
<div id="middle"></div>
<div id="right">Left column is incorrect (should look like right column)</div>

I'm sure there's a very simple solution to this problem, but I'm having trouble seeing it. Any help would be very appreciated.

Upvotes: 0

Views: 51

Answers (3)

Bn Mk
Bn Mk

Reputation: 164

var specs = [{
  "name": "E5 4603 v2",
  "cores": 4,
  "threads": 8,
  "base": 2.2,
  "turbo": 2.2,
  "price": 1000
}, {
  "name": "E5 4603 v2",
  "cores": 4,
  "threads": 8,
  "base": 2.2,
  "turbo": 2.2,
  "price": 1200
}, {
  "name": "E5 4603 v2",
  "cores": 4,
  "threads": 8,
  "base": 2.2,
  "turbo": 2.2,
  "price": 1500
}];

specs.forEach(function(elem) {
  $("#processor").append("<div class='product'><span class='price'>" + elem.price + "</span></div>");
  $("#middle").append("<div class='product'><span class='price'>" + elem.price + "</span></div>"); 
});

Try this

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

In the iterations, you keep overwriting all .price spans. Always write to the :last

var specs = [{
  "name": "E5 4603 v2",
  "cores": 4,
  "threads": 8,
  "base": 2.2,
  "turbo": 2.2,
  "price": 1000
}, {
  "name": "E5 4603 v2",
  "cores": 4,
  "threads": 8,
  "base": 2.2,
  "turbo": 2.2,
  "price": 1200
}, {
  "name": "E5 4603 v2",
  "cores": 4,
  "threads": 8,
  "base": 2.2,
  "turbo": 2.2,
  "price": 1500
}];

specs.forEach(function(elem) {
  console.log(elem.price);
  var text = "\
	<div class='product'>\
	    <span class='name'></span>\
	    <span class='price'></span>\
	</div>";
  var append = $("#processor").append(text);
  $(append).find(".price:last").text(elem.price); //Pretty sure my problem lies here
  $("#middle").append("<div>" + elem.price + "</div>"); //Can't figure it out though.
});
#left,
#middle,
#right {
  display: inline-block;
  margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
  <div id="processor" class="prodcat">
    <div class="main"></div>
  </div>
  <div id="harddrive" class="prodcat">
    <div class="main"></div>
  </div>
</div>
<div id="middle"></div>
<div id="right">Left column is incorrect (should look like right column)</div>

Upvotes: 1

puelo
puelo

Reputation: 5977

You are setting the price for ALL elements with the class .price, and thus all those elements will have the last price as a value, which is 1500

Upvotes: 3

Related Questions