Json对象操纵中的Javascript奇怪行为

Question

I really can't get my hand around what is happening there and I really think that I should share this with you guys:

I am making a call to my api at '/products' and the response looks something like this in postman:

[
  {
    "id": 2,
    "name": "some_product_name",
    "description": "description",
    "price": "$120.00",
    "firmware_version": "1.0",
    "quantity_in_stock": 50,
    "selling": true,
    "build_version": "1.2",
    "category_id": 1,
    "available_colors": [
      {
        "name": "blue",
        "in_stock": true,
        "picture": {
          "type": "Buffer",
          "data": []
        }
      },
      {
        "name": "black",
        "in_stock": true,
        "picture": null
      },
      {
        "name": "silver",
        "in_stock": true,
        "picture": {
          "type": "Buffer",
          "data": []
        }
      }
    ]
  }
]

Now what I am trying to do here is to create a new object called products_showcase that has one entry per product color, with the same informations except for the available_colors property, replaced by the color object:

$scope.initModel = function() {
    $http({
      method: 'GET',
      url: '/products'
    }).then(function(resp) {
      console.log(resp.data);
      $scope.products = resp.data;
      $scope.products.forEach((item, index, array) => {
        item.available_colors.forEach((color, index, array) => {              
          var product = item;
          product.color = {};
          product.color = color;
          delete product['available_colors'];
          $scope.products_showcase.push(product);
        });
      });
    }, function(error) {
      $scope.error = error;
    });
  };

But then, something really strange is happening:

1. The available_colors property gets deleted also in the response object, that I did not touch in the code in any way.
2. The color property gets added to the response object too.
3. The products_showcase is an array containing the same object 3 times with the color property equal to the firs color of the $scope.products.available_colors object i am iterating through

Answer 1

Javascript won't create new object when you assign it to a variable. You can use Object.create function to create a new object from existing one.

$scope.initModel = function() {
    $http({
            method: 'GET',
            url: '/products'
    }).then(function(resp) {
        console.log(resp.data);
        $scope.products = Object.create(resp.data);
        $scope.products.forEach((item, index, array) => {
                item.available_colors.forEach((color, index, array) => {              
                        var product = Object.create(item);
                        product.color = {};
                        product.color = color;
                        delete product['available_colors'];
                        $scope.products_showcase.push(product);
                });
        });
    }, function(error) {
        $scope.error = error;
    });
};

Answer 2

Javascript assignment operator doesn't apparently create a new instance of the object for the new variable, it simply creates a pointer to the memory address of the 'father' object.

Example code:

var object = {property: 'myProp'};
console.log(object);

{property: 'myProp'}

var newObj = object;
newObj.newProperty = 'myNewProp';
console.log(object);

{property: 'myProp', newProperty: 'myNewProp'}

To create a new instance of the object we have to use the Object.create() method.