Jquery object replaces value in array

Question

I'm creating products as a object in jquery and putting them into an array, but the result is two identical. It easy to understand if I just put an example.

var product = {
  id: 0,
  name: 'Tomato',
  price: 500
};

var array_products = new Array();

//each loops 2
$.each(data, function(i, item) {
  var new_product = product;
  new_product.id = i;
  new_product.name = "new Tomato " + i;
  new_product.price = 700;

  array_products.push(new_product);
});

console.log(array_products);

Result:

0: {
  id: 1,
  name: "new Tomato 1",
  price: 700
}
1: {
  id: 1,
  name: "new Tomato 1",
  price: 700
}

The problem here is that in the second loop when I "create" the new product, replace the values in the array at the position 0. The result is two equal products instead of two different. What am I doing wrong?

You are not creating new objects. You are simply assigning new_product to point to product. Also you have to do to fix this, is copy your object definition up top down into your each, so it creates a new object each time. — Taplar
– Taplar, Commented Jun 29, 2018 at 17:10
Also consider using map, rather than each, for this situation. map() is made for translations like this. — Taplar
– Taplar, Commented Jun 29, 2018 at 17:14
This might be informative: Learning how references work in JavaScript — showdev
– showdev, Commented Jun 29, 2018 at 18:22

Taplar · Accepted Answer · 2018-06-29 17:19:14Z

3

You can perform simple translation like this with map(). Also in order to make the object different, you have to create a new object each time. Either by creating it and changing it, or you could just simply create it with the values that you would later assign to it.

var array_products = $.map(data, function(i, item) {
  return {
    id: i,
    name: 'product_'+ i,
    price: 500
  };
});

console.log(array_products);

answered Jun 29, 2018 at 17:19

Taplar

25k4 gold badges24 silver badges36 bronze badges

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

Comments

Raghuram Kasyap · Accepted Answer · 2018-06-29 21:10:33Z

1

You just need to change the object definition.

var product = function Product(){
    this.id = null;
    this.name = null;
    this.price = null;
}

And your loop becomes:

$.each(data, function(i, item) {
  var new_product = new product();
  new_product.id = i; 
  new_product.name = 'new Tomato '+i;
  new_product.price = 700;
  array_products.push(new_product);
});

In case you wanted to clone an existing object and change a few properties, then your loop will be:

var new_product = Object.assign({}, existingProductObject); ;
new_product.id = i; 
array_products.push(new_product);

Here is a working sample

edited Jun 29, 2018 at 21:10

answered Jun 29, 2018 at 18:31

Raghuram Kasyap

3152 silver badges10 bronze badges

2 Comments

Pedro Joaquín Over a year ago

This is great for what I need, thanks... But what if I want to use a base product with info to create a new product just to change one value. Ej. p1 = {id: 1, price 500, tomato}, p2 = p1; p2.id = 2;

Raghuram Kasyap Over a year ago

@PedroJoaquín Updated the sample code and also the answer.

Collectives™ on Stack Overflow

Jquery object replaces value in array

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related