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

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?

CodePudding user response：

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
);

CodePudding user response：

you must delete the comma after the forEach();

 yourArray.forEach(element=>{
 //do something 
 });