Как вывести данные из массива полученного в json?

Question

[danila_prokopenko]

Задача: спарсить данные о товарах в корзине в формт json и вывести их ниже.
У меня есть корзина, в ней я парсю данные и перевожу в формат json, но вывести их на страницу не могу. В консоли все выходит, но на страницу не могу.
cart.service

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

@Injectable({
  providedIn: 'root'
})
export class CartService {

  cartItems = [] as any[];
  constructor() { }

  addToCart(product: any) {
    
      this.cartItems.push({
        productId: product.id,
        img: product.img,
        name: product.name,
        price: product.price,
        totalPrice: product.price * product.qty,
        qty: product.qty,
      });
  }

  cartTotal : number = 0;

  // TODO итоговая стоимость некорректно работает
  totalCostOfCart(){
  }

  getCartItems() {
    return this.cartItems;
  }

  // clearCart() {
  //   this.cartItems = [];
  //   return this.cartItems;
  // }

  delete(product: any) {
    this.cartItems.splice(this.cartItems.indexOf(product), 1);
  }

  plusQty(product: any) {
    let productId = this.cartItems.indexOf(product);
    this.cartItems[productId].qty++;
    this.cartItems[productId].totalPrice = this.cartItems[productId].price * this.cartItems[productId].qty;
  }

  minusQty(product: any) {
    let productId = this.cartItems.indexOf(product);
    this.cartItems[productId].qty--;
    this.cartItems[productId].totalPrice = this.cartItems[productId].price * this.cartItems[productId].qty;

    if (this.cartItems[productId].qty === 0) {
      this.delete(product)
    }
  }

  cartJson = [] as any [];
  parseToJsonCartItems() {
    this.cartItems.map(el => {
      // console.log(el);
      let cartItemJSON = (JSON.parse(JSON.stringify(el)));
      console.log("TO JSON");
      console.log(cartItemJSON);
      return cartItemJSON;
    })

    // if (Array.isArray(arr)) {
    //   console.log("array");
    // } else if (typeof arr == 'string') console.log ('string');
    // else if (arr != null && typeof arr == 'object') console.log ('object');
    // else console.log ('other');
  }
}

cart.component.ts

import { Component, OnInit } from '@angular/core';
import { CartService } from 'src/app/services/cart.service';
import { WishlistService } from 'src/app/services/wishlist.service';


@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {

  cartItems = [] as any[];
  productPrice = [];
  
  cartTotal !: any;
  
  cartItemJSON : any;
  cartJson = [] as any [];
  
  constructor(
    private cartService: CartService,
    private wishlistService: WishlistService,
  ) { }

  ngOnInit(): void {
    this.cartItems = this.cartService.getCartItems();
    this.cartService.parseToJsonCartItems();
  }

  delete(item: any) {
    this.cartService.delete(item);
  }

  plusQty(item: any) {
    this.cartService.plusQty(item);
  }

  minusQty(item: any) {
    this.cartService.minusQty(item);
  }

  addToWishlist(item: any) {
    this.wishlistService.addToWishlist(item);
    this.cartService.delete(item);
  }

  parseToJsonCartItems() {
    this.cartService.parseToJsonCartItems();
  }
}

cart.component.html

<div class="cart-item" *ngFor="let item of cartItems">
    <span>Product name {{ item.name }}</span>
    <br>
    <span>price: {{ item.totalPrice | currency }}</span>
    <br>

    <div class="cart-item__quantity">
        <button class="cart-item__quantity__minus" (click)="minusQty(item)">
            -
        </button>
        <div class="cart-item__quantity__qty">
            qty: {{ item.qty }}
        </div>
        <button class="cart-item__quantity__plus" (click)="plusQty(item)">
            +
        </button>
    </div>

    <button class="cart-item__item__button-delete" (click)="delete(item)">delete</button>
    <button class="cart-item__item__button-wishlist" (click)="addToWishlist(item)">wishlist and delete from
        cart</button>

</div>

<button (click)="parseToJsonCartItems()">TO JSON</button>
<div>
    cartItemJSON {{cartItemJSON}}
</div>
<div>cartItems.length {{cartItems.length}}</div>

В ангуляре я новичек. Как их вывести на страницу?

Answer 1

[Pavel Shvedov]

Ты выводишь, cartItemJSON, но нигде не присваиваешь ему значение

Comments

[danila_prokopenko]

cart.service

cartItemJSON = [] as any[];
  parseToJsonCartItems(cartItemJSON: any) {
    this.cartItems.map(el => {
      // console.log(el);
      let cartItemJSON = (JSON.parse(JSON.stringify(el)));
      console.log("TO JSON")
      console.log(cartItemJSON);
      return cartItemJSON;
    })
  }

cart.components.ts

cartItemJSON = [];
  ngOnInit(): void {
    this.cartItems = this.cartService.getCartItems();
    this.parseToJsonCartItems();<img src="https://sun9-53.userapi.com/impg/z8Feo1iSa6lzlWiPKpw1GSjoadB9XPL-40eGgw/A_o0hb7EQFM.jpg?size=775x582&quality=96&sign=47e3524c655fbed7ae53c99a51d15092&type=album" alt="image"/>
  }

parseToJsonCartItems(cartItemJSON : any) {
    this.cartService.parseToJsonCartItems( cartItemJSON);
  }

cart.component.html

<button (click)="parseToJsonCartItems()">TO JSON</button>
<div>
    cartItemJSON {{cartItemJSON}}
</div>

теперь вот так...

[Pavel Shvedov]

1. Метод CartService:: parseToJsonCartItems() ничего не возвращает, более того, даже если бы возвращал, в месте, где он вызывается:

ngOnInit(): void {
    this.cartItems = this.cartService.getCartItems();
    this.parseToJsonCartItems();
}

parseToJsonCartItems(cartItemJSON : any) {
    this.cartService.parseToJsonCartItems( cartItemJSON); // <-- тут
}

его возвращаемое значение никуда не присваивается.

2. Зачем тут параметр функции?

parseToJsonCartItems(cartItemJSON : any) {
    this.cartService.parseToJsonCartItems( cartItemJSON);
}

Тем более, что в месте, где эта функция используется как хэндлер события click, этот параметр не указывается, поэтому и ругается в консоли.

3.

parseToJsonCartItems(cartItemJSON: any) {
   this.cartItems.map(el => {
      // console.log(el);
      let cartItemJSON = (JSON.parse(JSON.stringify(el)));
      console.log("TO JSON")
      console.log(cartItemJSON);
      return cartItemJSON;
   })
}

передаваемый в функцию аргумент никак не участвует в том, что происходит в теле функции

[danila_prokopenko]

Pavel Shvedov, Спасибо вам, навели на нужную мысль)