Angular JSON

0

Siemka, mam pytanie.

Czy moglby ktos powiedziec mi w jaki sposób mogę odczytać z obiektu liste obiektów, które mają pole danego obiektu? (;-;)

json który otrzymuje:

{
  "cartItems": {
    "1": {
      "product": {
        "id": 1,
        "name": "Acer Predator",
        "type": "NOTEBOOK",
        "price": 7000,
        "inStockNumber": 10,
        "description": "Acer Predator, Intel i7770, Gtx1080",
        "active": true
      },
      "quantity": 4,
      "totalPrice": 28000
    }
  },
  "grandTotal": 0
}

W angularze próbuje to obsłużyć w ten sposób:


  ngOnInit() {
      this.cartService.getShoppingCart().subscribe(
        res => {
          this.cart = res.json();
          this.items = this.cart.cartItems;
        }
      )
  }

tylko wtedy w momencie gdy próbuje się dostać powiedzmy do quantity danego cart itema to dostaje errory tylko undefined etc.

Modele mniej więcej wyglądają tak:


import {CartItem} from './cartItem';

export class Cart {
  public grandTotal:number;
  public cartItems:CartItem[];
}


import {Product} from './product';

export class CartItem {
  public product:Product;
  public id:number;
  public quantity:number;
  public totalPrice:number;
}


Prosze o pomoc, nie moge ruszyć przez to dalej ;/

0
import { Component, OnInit } from '@angular/core';
import {Cart} from '../../../Admin/models/cart';
import {Router} from '@angular/router';
import {CartItem} from '../../../Admin/models/cartItem';
import {CartService} from '../../../UserFront/services/CartService/cart.service';
import {Product} from '../../../Admin/models/product';

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

private cart:Cart;
private items:CartItem[];
private products:Product[];
private counter:number=0;

  constructor(private cartService:CartService) { }

  ngOnInit() {
      this.cartService.getShoppingCart().subscribe(
        res => {
          this.cart = res.json();
          this.items = this.cart.cartItems;
        },
        err =>{
          console.log(err.text());
        }
      )
  }

}

0

taki error dostaje jak próbuje *ngFor="let item of items" -> {{item.quantity}} :

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

niby powód oczywisty, ale nie rozumiem czemu tak się dzieje i jak to można obejść. Wcześniej miałem listę produktów (obiektów) i normalnie działało ;v

0

Te Twoje cartItemsobiektem [1], a nie tablicą - https://medium.com/@papaponmx/looping-over-object-properties-with-ngfor-in-angular-869cd7b2ddcc

1 którego kluczami są ciągi znaków przypominające liczby, lecz nie sprawia to magicznie, że obiekt zamienia się w tablicę.

0
Patryk27 napisał(a):

Te Twoje cartItemsobiektem [1], a nie tablicą - https://medium.com/@papaponmx/looping-over-object-properties-with-ngfor-in-angular-869cd7b2ddcc

1 którego kluczami są ciągi znaków przypominające liczby, lecz nie sprawia to magicznie, że obiekt zamienia się w tablicę.

Mógłbyś na szybko i obrazowo napisać jakiś skrawek kodu który by mi pomogł to zamienić właśnie na tablice? :D

0
Błękitny Karp napisał(a):
Patryk27 napisał(a):

Te Twoje cartItemsobiektem [1], a nie tablicą - https://medium.com/@papaponmx/looping-over-object-properties-with-ngfor-in-angular-869cd7b2ddcc

1 którego kluczami są ciągi znaków przypominające liczby, lecz nie sprawia to magicznie, że obiekt zamienia się w tablicę.

Mógłbyś na szybko i obrazowo napisać jakiś skrawek kodu który by mi pomogł to zamienić właśnie na tablice? :D

Mam na myśli to, w jaki sposób mógłbym rzekomo zamienić CartItems na array tak aby było możliwe korzystanie z ngFor

0

no przecież kod masz w podanym przez Patryka linku ;), wystarczy go wsadzić w odpowiednie miejsce:

 ngOnInit() {
      this.cartService.getShoppingCart().subscribe(
        res => {
          this.cart = res.json();
          this.items = [];
          let evilResponseProps = Object.keys(this.cart.cartItems);
          for (prop of evilResponseProps) 
          { 
             this.items.push(evilResponseProps[prop]);
          }

        },
        err =>{
          console.log(err.text());
        }
      )
  }
0
neves napisał(a):

no przecież kod masz w podanym przez Patryka linku ;), wystarczy go wsadzić w odpowiednie miejsce:

 ngOnInit() {
      this.cartService.getShoppingCart().subscribe(
        res => {
          this.cart = res.json();
          this.items = [];
          let evilResponseProps = Object.keys(this.cart.cartItems);
          for (prop of evilResponseProps) 
          { 
             this.items.push(evilResponseProps[prop]);
          }

        },
        err =>{
          console.log(err.text());
        }
      )
  }

robiąc to w ten sposób, dostaje taki error :

ERROR SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at Response.push../node_modules/@angular/http/fesm5/http.js.Body.json (http.js:927)
    at SafeSubscriber._next (shopping-cart.component.ts:24)

meh

0

To było przyczyną złej odpowiedzi z servera, ale mimo wszystko jak próbuje się odwołać w ten sposób:

<table>
    <tr *ngFor = "let item of items">
        {{item.quantity}}

    </tr>

  </table>

to dostaje

ERROR TypeError: Cannot read property 'quantity' of undefined
    at Object.eval [as updateRenderer] (ShoppingCartComponent.html:2)

ktoś wie czemu? :(

1 użytkowników online, w tym zalogowanych: 0, gości: 1