What causes the "Argument expression expected" error in this Angular 13 app?

Advertisements

I am working on an e-commerce app who’s front-end is made in Angular 13.

The below code is intended to sum the prices of the items in the cart:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: '.app-top-cart',
  templateUrl: './top-cart.component.html',
  styleUrls: ['./top-cart.component.css']
})
export class TopCartComponent implements OnInit {
  cartItems: any = [
    {
      id: 1,
      title: "iPhone 9",
      description: "An apple mobile which is nothing like apple",
      price: 549,
      discountPercentage: 12.96,
      rating: 4.69,
      stock: 94,
      brand: "Apple",
      category: "smartphones",
      thumbnail: "https://dummyjson.com/image/i/products/1/thumbnail.jpg",
      images: [
        "https://dummyjson.com/image/i/products/1/1.jpg",
        "https://dummyjson.com/image/i/products/1/2.jpg",
      ]
    },
    {
      id: 2,
      title: "iPhone X",
      description: "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...",
      price: 899,
      discountPercentage: 17.94,
      rating: 4.44,
      stock: 34,
      brand: "Apple",
      category: "smartphones",
      thumbnail: "https://dummyjson.com/image/i/products/2/thumbnail.jpg",
      images: [
        "https://dummyjson.com/image/i/products/2/1.jpg",
        "https://dummyjson.com/image/i/products/2/2.jpg",
      ]
    }
  ];

  constructor() { }

  totalPrice: number = 0;

  doTotalPrice(){
    let total = 0,
    this.cartItems.forEach((item: { price: number, quantity: number; }) => {
      total += item.price * item.quantity
    }),
    this.totalPrice = total,
 }

  ngOnInit(): void {
    this.doTotalPrice();
  }

}

The problem

The code above does not compile. It gives the error Argument expression expected on line 54, where the doTotalPrice method closes.

Where is my mistake?

>Solution :

doTotalPrice(){
    let total = 0,
    this.cartItems.forEach((item: { price: number, quantity: number; }) => {
      total += item.price * item.quantity
    },
    this.totalPrice = total,
 }

You do not close your function and you use commas instead of semicolons.

doTotalPrice(){
    let total = 0,
    this.cartItems.forEach((item: { price: number, quantity: number; }) => {
      total += item.price * item.quantity
    });
    this.totalPrice = total;
 }

Bonus, cleaner code :

this.totalPrice = this.cartItems.reduce(
  (p, { price, quantity }) => p + price * quantity, 
  0
);

Leave a ReplyCancel reply