@danila_prokopenko

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

Задача: спарсить данные о товарах в корзине в формт 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>

pfUCDvdNCKY.jpg?size=1920x1013&quality=96&sign=53c4456110b8335fad920f5170b06bc1&type=album

В ангуляре я новичек. Как их вывести на страницу?
  • Вопрос задан
  • 42 просмотра
Решения вопроса 1
mmmaaak
@mmmaaak
Ты выводишь, cartItemJSON, но нигде не присваиваешь ему значение
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы