如何从数组（本地存储）中的 json 对象获取特定数据 - Angular 7

Question

在我的 angular 项目中有购物车功能。我将每个产品作为数组中的对象存储在本地存储中。

1。所以我想从 json 对象中获取每个产品的价格 (productPrice)，以显示购物车中的总价。

2。另一件事是我想从本地存储中删除特定对象，按项目 ID 删除购物车项目数组。

谁能帮我做到这一点。

Cart.component.ts

public cartItems :any; 

ngOnInit() {
  if(this.cartService.getFromLocalStrorage()){
    this.cartItems = this.cartService.getFromLocalStrorage(); 
    console.log(this.cartItems); //result show in below  
  }
}

购物车-services.service.ts

public getFromLocalStrorage() {
  const  cart =  JSON.parse(localStorage.getItem('cartObject'));
  return cart;
}

结果 - 控制台日志

(4) [{…}, {…}, {…}, {…}]

0:
productId: 2
productName: "product 2"
productPrice: 1000
productQuantity: 9
productSelectedTypeId: 1
productSelectedTypeName: "100 ml"

////---------------------------

在本地存储

 [{productId: 2, productSelectedTypeId: 1, productSelectedTypeName: "100 ml", productQuantity: 9,…},…]

0: {productId: 2, productSelectedTypeId: 1, productSelectedTypeName: "100 ml", productQuantity: 9,…}
1: {productId: 2, productSelectedTypeId: 3, productSelectedTypeName: "300 ml", productQuantity: 1,…}
2: {productId: 2, productSelectedTypeId: 2, productSelectedTypeName: "200 ml", productQuantity: 1,…}
3: {productId: 3, productSelectedTypeId: null, productSelectedTypeName: null, productQuantity: 24,…}

Answer 1

您可以使用简单的 .map() 来提取仅包含价格的数组，然后使用 reduce() 来计算总数。示例如下。

解决方案

public ngOnInit(): void
{
  if(this.cartService.getFromLocalStrorage())
  {
    this.cartItems = this.cartService.getFromLocalStrorage(); 
    console.log(this.cartItems); //result show in below  

    const prices = this.cartItems.map(data => data.productPrice); 
    console.log(prices); // array of all the prices

    const total = prices.reduce((a, b) => a + b));
    console.log(total); // total prices from array of prices
  }
}

要更新本地存储中的值，您可以过滤数组并重新保存它。

this.cartItems = this.cartItems.filter(data => data.productId !== 3);
localStorage.setItem('cartObject', JSON.stringify(this.cartItems));

文档

.map() // .reduce() // setting item by key in local storage // .filter()

编辑

对于包含每个产品数量的乘法，将其添加到地图中

const prices = this.cartItems.map( data => (data.productPrice * data.productQuantity) ); 
console.log(prices); // array of all the prices

然后再次在此使用reduce()函数计算所有包括数量的总价。

Answer 2

我想你想做这样的事情

import { Injectable } from '@angular/core';

export interface ICartItem {
    productId: number;
    productName: string;
    productPrice: number;
    productQuantity: number;
    productSelectedTypeId: number;
    productSelectedTypeName: string;
}

@Injectable()
export class CartService {

    public cart: ICartItem[] = [];

    constructor() {
        this.load();
    }

    load() {
        if ( localStorage.getItem('cartObject') !== null ) {
            this.cart = JSON.parse(localStorage.getItem('cartObject'));
        }
    }

    save() {
        localStorage.setItem('cartObject', JSON.stringify(this.cart));
    }

    add(cartItem: ICartItem) {
        this.cart.push(cartItem);
        this.save();
    }

    deleteById(id: number) {
        const items = this.cart.filter(
            cartItem => cartItem.productId === id);

        if ( items.length === 1 ) {
            const index = this.cart.indexOf(items[ 0 ]);
            this.cart.splice(index, 1);
            this.save();
        }
    }

    deleteCartItem(cartItem: ICartItem) {
        const itemIndex = this.cart.indexOf(cartItem);

        if ( itemIndex > -1 ) {
            this.cart.splice(itemIndex, 1);
            this.save();
        }
    }

    deleteByIndex(index: number) {
        this.cart.splice(index, 1);
        this.save();
    }

    calculateTotalPrice(): number {
        return this.cart
            .reduce((
                currentValue,
                cartItem
            ) => (cartItem.productPrice * cartItem.productQuantity) + currentValue, 0);
    }
}

所以基本上我所做的就是在我们更改它后保存它。并在我们加载应用程序后加载它。这样您就不必担心让 localStorage 与数组保持同步。只要你使用这些功能，你应该没问题。

我还创建了一些删除示例。

希望对您有所帮助！

如何从数组（本地存储）中的 json 对象获取特定数据 - Angular 7

How to get specific data from json object in array (Local Storage) - Angular 7

angular

typescript

angular7

cart

shopping-cart