Displaying Angular 2 JSON Objects

Question

I have an object being returned with a Promise.

My Object is structured like so:

export class ShoppingCart {
Cart_Items: [
    {
        Id: number,
        SKU: string,
        Link: string,
        ImageURL: string,
        Title: string,
        Description: string,
        Qty: number,
        Unit_Wt: number,
        Unit_Price: number,
        Sub_Total: number,
        Sub_Wt_Total: number,
        IsTaxExempt: boolean
    }
    ];
Shipping_Cost: number;
Taxes: number;
Discount: number;
Sub_Total: number;
Total_Wt: number;
Total: number;

}

I am using this in my component class:

display_cart: ShoppingCart;

constructor(private _shoppingCartService: ShoppingCartService) {}

getShoppingCart() {
    this._shoppingCartService.getShoppingCart().then(display_cart => this.display_cart = display_cart);
    // this.display_cart = this._shoppingCartService.getShoppingCart();
}
ngOnInit(){
    this.getShoppingCart();
}

In My service i am using this to get the data:

getShoppingCart() {
    return Promise.resolve(DISPLAY_CART);
}

The only thing I can use to display any of my data is {{ display_cart | json }} but that just returns my json. How do I extract the values and display the Cart_Items in a loop and the other variables where I need them?

See stackoverflow.com/questions/35647365/…

Mark Rajcok
– Mark Rajcok

2016-04-05 21:21:15 +00:00
Commented Apr 5, 2016 at 21:21 — Mark Rajcok
– Mark Rajcok, Commented Apr 5, 2016 at 21:21

Thierry Templier · Accepted Answer · 2016-04-05 21:23:26Z

1

You could use something like that:

display_cart: ShoppingCart;

constructor(private _shoppingCartService: ShoppingCartService) {}

getShoppingCart() {
    this._shoppingCartService.getShoppingCart().then(
    display_cart => {
      this.display_cart = display_cart;
      this.items = display_cart.Cart_Items ;
    });
}

ngOnInit(){
    this.getShoppingCart();
}

And use items in the corresponding template:

<li *ngFor="#item of items">
  {{item.title}}
</li>

answered Apr 5, 2016 at 21:23

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joshua Szuslik Over a year ago

I actually had to change display_cart: ShoppingCart; to display_cart: ShoppingCart = new ShoppingCart; so that even if no data was returned from the server the object was was still defined and didn't cause errors.

Collectives™ on Stack Overflow

Displaying Angular 2 JSON Objects

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related