Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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
);
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading