My issue is related to the user object that contains nested arrays, making it difficult to access secondary arrays. I have created selectors with ngxs to retrieve and utilize data in HTML code, but extracting secondary arrays seems impossible.
{
"userProfile": {
"id": 1,
"firstname": "kevin",
"lastname": "kevin",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33565e525a5f73545e525a5f1d505c5e">[email protected]</a>",
"phone": "6949647400",
"cart": {
"id": 6,
"grandTotal": 1000,
"cartItem": [
{
"id": 5,
"quantity": 1,
"totalPrice": 55.5,
"product": {
"id": 1,
"name": "Vans Shoes",
"price": 55.5
}
},
{
"id": 6,
"quantity": 1,
"totalPrice": 111,
"product": {
"id": 2,
"name": "Nike Shoes",
"price": 55.5
}
},
{
"id": 7,
"quantity": 1,
"totalPrice": 55.5,
"product": {
"id": 3,
"name": "Volcom T-shirt",
"price": 55.5
}
}
]
},
"username": "kevin",
"password": "$2a$10$PITUkb3QoOCIbZSDO9xLzOdfKwM.H/sFp.pgYnfssi31LIn8WotW2",
"roles": [
{
"id": 3,
"name": "ROLE_ADMIN"
}
]
}
}
The above array is received from a backend call. My goal is to display the cart{} array along with its products in the frontend.
import { Component, OnInit } from '@angular/core';
import { Cart } from 'src/app/core/interfaces/cart';
import { CartState} from './state/cart.state';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { UserProfile } from 'src/app/core/interfaces/userProfile';
import { ProfileState } from 'src/app/pages/profile/state/profile.state';
import { GetCart, } from './state/cart.action';
export class UserProfile {
id!: number;
username!: string ;
password!: string ;
email!:string;
firstname!: string ;
lastname!: string ;
roles!: Roles;
token!: string ;
cart!:Cart[];
}
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css'],
})
export class CartComponent implements OnInit {
userId! :number;
cartId! :number;
cart! :any[];
@Select(ProfileState.userProfile) userProfile$!: Observable<UserProfile>;
@Select(CartState.cart)cart$!: Observable<Cart>;
constructor(private store:Store) {}
ngOnInit(){
this.userProfile$.subscribe(userProfileData => {
this.userId = userProfileData.id
});
this.store.dispatch(new GetCart(this.userId)).subscribe(response => {
this.cart = response;
})
}
}