How can I verify if there are duplicate items in the cart using Angular 5?

Question

How can I verify if there are duplicate items in the cart using Angular 5?

As a newcomer to Angular 5, I am delving into creating a basic shopping cart to master the framework. However, I am currently facing a dilemma regarding how to handle duplicate entries in the cart data. Specifically, I am unsure whether I should store objects in an array or arrays in objects to manage the data efficiently.

This is my current approach in the Home component:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
    items: Array<object> = [];
    total_items:Number = 0;
    cart = {};
    broadcast_obj = {items:[],totals:{}};
    total_sum:Number = 0.0;
    htmlToAdd:String = '';

    constructor(private _data: DataService) {  }

    ngOnInit() {
        this._data.cast.subscribe(res => this.broadcast_obj = res);
        this._data.changeCart(this.broadcast_obj);
    }

    additem(id,itemText,amount){
        this.total_items = 10;
        this.total_sum += amount;

        this.cart = {id:id, name: itemText, price: amount,quantity:1};
        if(this.items.length>0){
            this.items.find(x => x.id == 3);//error id does not exist on type object
        }
        this.items.push(this.cart);
        this.broadcast_obj.items = this.items;
        this.broadcast_obj.totals = {total_items:this.total_items,total_sum:this.total_sum};
        console.log(this.broadcast_obj)

    }

}

In my current implementation, I am storing data in two objects and adding them to an array: 1- {id:id, name: itemText, price: amount,quantity:1}; 2- {total_items:this.total_items,total_sum:this.total_sum};

I am now faced with the challenge of checking if an ID already exists in the array and incrementing the quantity. However, my current approach of searching for the ID in the array object is resulting in an error (id does not exist on type object).

Here is the current structure of the array of objects: https://i.sstatic.net/xlxX9.jpg

I have also been contemplating an alternative approach of storing objects in array indexes based on their IDs, such that if an item has an ID of 199, it would be stored in array index[199] for faster retrieval.

I am uncertain which approach would be more efficient in terms of search capability, or if both methods are flawed.

I would appreciate assistance in resolving my error and guidance on structuring the cart data correctly for efficient searching and observable data passing.

Thank you.

javascript jquery angular typescript

Answer 1

Answer №1

The reason for the error is the following line: items: Array<object> = []; This line indicates that items is an array of Objects (javascript objects). Objects do not have properties like id. To resolve this, you should create an interface for your item:

interface ICartItem {
    id: number;
    name: string;
    price: number;
    quantity: number;
}

Then, in your component, you can use items: ICartItem[] = []; (similar to

items: Array<ICartItem> = [];

). This will eliminate the error.

Your component:

// ...
items: ICartItem[] = [];
cart: ICartItem; // no need to initialize it with an empty object
//...

Answer 2

The reason for the error is the following line: items: Array<object> = []; This line indicates that items is an array of Objects (javascript objects). Objects do not have properties like id. To resolve this, you should create an interface for your item:

interface ICartItem {
    id: number;
    name: string;
    price: number;
    quantity: number;
}

Then, in your component, you can use items: ICartItem[] = []; (similar to

items: Array<ICartItem> = [];

). This will eliminate the error.

Your component:

// ...
items: ICartItem[] = [];
cart: ICartItem; // no need to initialize it with an empty object
//...

Answer 3

Answer №2

I concur with the answer provided by @BorisLobanov. Additionally, I wanted to share another example demonstrating an alternative approach...

One way to handle this is by declaring items as:

items: Array<any> = new Array<any>();

. This approach can help in addressing potential errors as well.

Nevertheless, as emphasized by @BorisLobanov, and with which I echo agreement, it is important to note that:

Utilizing any is not considered best practice as it undermines the purpose of Typescript

From my perspective, using an array of type any is justified when the "items" are fetched from an API call. This is particularly useful when dealing with arrays of objects containing numerous properties. In such cases, one may only need a few specific properties for processing or when the data itself is not of primary concern, as illustrated below.

The use of any allows you to bypass the strict type checks enforced by the Typescript compiler (no compile-time errors), enabling you to access properties within items in an unsafe manner.

When dealing with nested data structures, the advantage becomes more evident. For example:

australianCities = [
  {
    name: 'Sydney',
    suburbs: [{
      name: 'town 1',
      houses: [{
          population: 3,
          address: 'aa'
        },
        {
          population: 1,
          address: 'bb'
        }
      ]
    }]
  }, ...
];

The thought of defining interfaces for each object within this structure (especially when complexity increases) can be daunting. Moreover, considering the dynamic nature of APIs, it makes more sense to simply calculate the total population across all Australian cities using any.

This process can be simplified using any as demonstrated below:

let sum = (accumulator, currentValue) => accumulator + currentValue;
population = australianCities.map(city => city.suburbs.map(town => town.houses.map(house => house.population).reduce(sum)).reduce(sum)).reduce(sum);

var australianCities = [{
    name: 'Sydney',
    suburbs: [{
      name: 'town 1',
      houses: [{
          population: 3,
          address: 'aa'
        },
        {
          population: 1,
          address: 'bb'
        }
      ]
    }]
  },
  {
    name: 'Perth',
    suburbs: [{
      name: 'town 1',
      houses: [{
          population: 10,
          address: 'aa'
        },
        {
          population: 2,
          address: 'bb'
        }
      ]
    }]
  }
];

var sum = (accumulator, currentValue) => accumulator + currentValue;

totalPopulation = australianCities.map(city => city.suburbs.map(town => town.houses.map(house => house.population).reduce(sum)).reduce(sum)).reduce(sum);

console.log({
  totalPopulation
});

Answer 4

I concur with the answer provided by @BorisLobanov. Additionally, I wanted to share another example demonstrating an alternative approach...

One way to handle this is by declaring items as:

items: Array<any> = new Array<any>();

. This approach can help in addressing potential errors as well.

Nevertheless, as emphasized by @BorisLobanov, and with which I echo agreement, it is important to note that:

Utilizing any is not considered best practice as it undermines the purpose of Typescript

From my perspective, using an array of type any is justified when the "items" are fetched from an API call. This is particularly useful when dealing with arrays of objects containing numerous properties. In such cases, one may only need a few specific properties for processing or when the data itself is not of primary concern, as illustrated below.

The use of any allows you to bypass the strict type checks enforced by the Typescript compiler (no compile-time errors), enabling you to access properties within items in an unsafe manner.

When dealing with nested data structures, the advantage becomes more evident. For example:

australianCities = [
  {
    name: 'Sydney',
    suburbs: [{
      name: 'town 1',
      houses: [{
          population: 3,
          address: 'aa'
        },
        {
          population: 1,
          address: 'bb'
        }
      ]
    }]
  }, ...
];

The thought of defining interfaces for each object within this structure (especially when complexity increases) can be daunting. Moreover, considering the dynamic nature of APIs, it makes more sense to simply calculate the total population across all Australian cities using any.

This process can be simplified using any as demonstrated below:

let sum = (accumulator, currentValue) => accumulator + currentValue;
population = australianCities.map(city => city.suburbs.map(town => town.houses.map(house => house.population).reduce(sum)).reduce(sum)).reduce(sum);

var australianCities = [{
    name: 'Sydney',
    suburbs: [{
      name: 'town 1',
      houses: [{
          population: 3,
          address: 'aa'
        },
        {
          population: 1,
          address: 'bb'
        }
      ]
    }]
  },
  {
    name: 'Perth',
    suburbs: [{
      name: 'town 1',
      houses: [{
          population: 10,
          address: 'aa'
        },
        {
          population: 2,
          address: 'bb'
        }
      ]
    }]
  }
];

var sum = (accumulator, currentValue) => accumulator + currentValue;

totalPopulation = australianCities.map(city => city.suburbs.map(town => town.houses.map(house => house.population).reduce(sum)).reduce(sum)).reduce(sum);

console.log({
  totalPopulation
});

How can I verify if there are duplicate items in the cart using Angular 5?

Answer №1

Answer №2

Similar questions

Preventing the triggering of events or functions while utilizing angular-gantt

What is the best way to attach an event again in jQuery?

What is the reason behind the label value persistently showing up after the page is refreshed?

Generating a JSON Array Made up of JSON Elements Using JQuery

The state variable remains undefined even after integrating useEffect in a React.js component

Is it possible for me to transfer a class attribute to a directive template in AngularJS?

How to remove the horizontal scrollbar from material-ui's Drawer element

How to access a variable in an Angular Factory's callback function from outside the factory

Guide on Capturing Szimek/Signature_Pad using PHP: How to Save Javascript as PHP Variable?

Manipulate the color of the parent text using a button nested within

What is the best way to keep track of a checkbox's value after unchecking it and then returning to the same slide?

Having trouble finding the correct route using an ajax request

How to Redirect a Webpage to the Same Tab in ASP.NET

Is there a way to identify a visitor's country and automatically direct them to a relevant website?

AngularJS experiencing issues with Bootstrap multiselect functionality

Guide to using VueJS for sending a POST request with a JSON array containing data and uploading a File or Picture for each element in the array

Disappearing Cloned Form Fields in jQuery

I encountered an unexpected token error while using JavaScript syntax with objects

Is there a way to ensure that the 'pointermove' event continues to trigger even after the dialog element has been closed?

Navigating the complexities of extracting and storing a data type from a collection of objects