Проблема в добавлении свойств объекта к определенному объекту внутри массива в JavaScript

Question

У меня есть объект в JavaScript, который выглядит примерно так

{
product_id: "2",
product_name: "Drinks"
}

Имя объекта - product.

Существует массив, который содержит записи вышеупомянутого объекта.Таким образом, каждый элемент массива является записью вышеуказанного объекта.

При нажатии кнопки я проверяю, существует ли в массиве запись объекта с определенным product_id (который ищется) или нет.Если объект с определенным идентификатором product_id не существует в массиве, я должен добавить этот новый объект в массив.Принимая во внимание, что если запись объекта с определенным идентификатором product_id существует, то сначала я должен добавить новое свойство с именем «qty» к объекту, а затем этот объект должен быть добавлен в качестве новой записи в массив.

Ниже приведенокод при нажатии кнопки.

Я console.log () массив, чтобы увидеть результат.

Когда кнопка нажимается в первый раз, я получаю правильную запись в массиве, где он показывает объект внутри массива.

Когда кнопка нажимается второй раз, код переходит кусловие else и новое свойство (по имени qty) добавляются к объекту, а затем объект добавляется в массив.Итак, теперь в массиве есть две записи объекта (первая добавляется через условие if, а вторая добавляется через условие else).

Странно, проблема в том, что при нажатии второй кнопки времени и выполнении условия else код модифицирует предыдущую запись существующего объекта (которая уже есть в массиве) и добавляет свойство qty в этот объектзапись также.

В идеале он должен обрабатывать эти две записи как отдельные записи, и если я изменяю вторую запись объекта, то первая запись (которая уже существует в массиве) должна оставаться как есть (что означает отсутствие свойства qty).) тогда как он также изменяет предыдущую запись и добавляет новую.

OnButtonClick() {
  if (array.length === 0) {
    array.splice(0, 0, product);
  }
  else {
    product.qty = 1;
    array.splice(0, 0, this.product);
  }
}

Ниже приведен полный код:

// First Page: categories.ts sets the existing product object using a service 
// then navigates to the second page product.ts
ButtonClick() {
    this.Service.setProduct(product);
    this.route.navigate(['products']);
}

// Service page: service.ts

export class ManageService {
    products: any;
    ProductArray: any = [];

    constructor() { }
    public setProduct(data) {
      this.products = data;
    }

    public getProduct() {
        return this.products;
    }
}

//Second page: products.ts
// First it gathers the product object details that were passed from previous 
// categories.ts using getProduct() method in the service.ts 

export class ProductsPage implements OnInit {
    product: any = [];

    ngOnInit() {
        this.product = this.Service.getExtras();
    }

    ButtonClick(searchid: any) {
        // searchid is passed on button click
        let findsearchidarr = FindItem(searchid);
        if (findsearchidarr[0] === true) {
            this.Service.ProductArray[findsearchidarr[1]].quantity = 
++this.Service.ProductArray[findsearchidarr[1]].quantity;
            this.router.navigate(['categories']);
        }
        else if (findsearchidarr[0] === false) {
            this.product.quantity = 1;
            this.Service.ProductArray.splice(0, 0, this.product);
            this.router.navigate(['categories']);
        }
    }
FindItem (searchid: any) {
        let i = 0;
        let foundarray: any = [];

        for (let items of this.Service.ProductArray) {
        if (items.search_id.toLowerCase().includes(searchid)) {
            foundarray[0] = true;
            foundarray[1] = i;
            foundarray[2] = items.product_id;
            return foundarray;
        }
        i++;
        }
        foundarray[0] = false;
        foundarray[1] = -1;
        foundarray[2] = 0;
        return foundarray;
    }
}

Answer 1

Проблема в том, что в JavaScript объекты обрабатываются по ссылке, и поэтому возникает путаница (по крайней мере, в моем случае), когда я пытаюсь добавить какое-либо свойство или изменить любое свойство в массиве объектов.

Решение, которое я нашел, состояло в том, чтобы сначала скопировать объект в другой объект, чтобы исключить возможность «по ссылке», а затем использовать новый «скопированный» объект, чтобы отметить новую запись.Это решило проблему.

Answer 2

См. Логику ниже.Он добавляет свойство количества к уже существующему объекту, в противном случае добавляет новый объект в массив.

products: any[] = [{
    product_id: "2",
    product_name: "Drinks"
  },
  {
    product_id: "3",
    product_name: "Wafers"
  },
  {
    product_id: "4",
    product_name: "Chocolates"
  }
];

productIDToSearch:number = 4;
quantityToAdd: number = 20;
let foundIndex = products.findIndex((val) => val.product_id == productIDToSearch);

if(this.foundIndex >= 0) {
    this.products[this.foundIndex].quantity = this.quantityToAdd;
}
else {
    this.products.push({product_id:productIDToSearch, product_name:'Ice-cream', quantityToAdd: 33});
    console.log(products);
}

Эквивалентный код JavaScript

var products = [{
    product_id: "2",
    product_name: "Drinks"
  },
  {
    product_id: "3",
    product_name: "Wafers"
  },
  {
    product_id: "4",
    product_name: "Chocolates"
  }
];

let productIDToSearch = 5;
let quantityToAdd = 20;
let foundIndex = products.findIndex((val) => val.product_id == productIDToSearch);

if(foundIndex >= 0) {
	products[foundIndex].quantity = quantityToAdd;
  console.log(products);
}
else {
	products.push({product_id:productIDToSearch, product_name:'Ice-cream', quantityToAdd: 33});
  console.log(products);
}