Как получить конкретные данные из объекта json в массиве (локальное хранилище) - Angular 7 - PullRequest
Новая
       52

Как получить конкретные данные из объекта json в массиве (локальное хранилище) - Angular 7

1 голос
/ 03 мая 2019

В моем угловом проекте есть функция корзины. Каждый продукт я буду хранить в локальном хранилище как объект в массиве.

1. Поэтому я хочу получить цену каждого продукта (productPrice) из объекта json, чтобы показать общую стоимость в корзине.

2. Другое дело, что я хочу удалить конкретный объект из локального хранилища, массив элементов корзины по идентификатору проекта.

может помочь мне сделать это.

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,…}

Ответы [ 2 ]

2 голосов
/ 03 мая 2019

Вы можете использовать простой .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(function(a, b) { return a + b; }, 0);
    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 () // элемент по ключу в локальном хранилище // .filter ()

Редактировать

Для умножения, включая количество каждогопродукт добавьте его в карту 

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

Затем снова используйте для этого функцию reduce() для расчета общей стоимости всех включенных количеств.

0 голосов
/ 03 мая 2019

Я думаю, вы хотели бы сделать что-то вроде этого 

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 в актуальном состоянии с массивом.Пока вы используете функции, у вас все будет в порядке.

Я также разработал несколько примеров удаления.

Надеюсь, это поможет вам!

...