Angular Model Creation for nested JSON

Question

I am new to angular. I have nested API response from strapi application. I have created model with interface. While accessing product data am not able to access attributes from product model.

  "data": [
    {
      "id": 1,
      "attributes": {
        "name": "Banana",
        "description": "Banana",
        "price": 150,
        "status": true,
        "sort_order": 1,
        "slug": null,
        "image": {
          "data": {
            "id": 20,
            "attributes": {
              "name": "product-2.jpg",
              "alternativeText": "product-2.jpg",
              "caption": "product-2.jpg",
              "url": "/uploads/product_2_aeb868f7e6.jpg"
            }
          }
        },
        "categories": {
          "data": [
            {
              "id": 3,
              "attributes": {
                "name": "Fresh Fruits",
                "status": true,
                "sort_order": 3,
                "slug": "fresh-fruits"
              }
            }
          ]
        }
      }
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 3,
      "pageCount": 4,
      "total": 12
    }
  }
}

My Product Model. (product.model.ts)

export class Product {
  data: ProductData[]
  meta: Meta
}

export interface ProductData {
  id: number
  attributes: ProductAttributes
}

export interface ProductAttributes {
  name: string
  description: string
  price: number
  status: boolean
  sort_order: number
  slug: any
  image: ProductImage
  categories: Categories
}

export interface ProductImage {
  data: ImageData
}

export interface ImageData {
  id: number
  attributes: ImageAttributes
}

export interface ImageAttributes {
  name: string
  alternativeText: string
  caption: string
  url: string
}

export interface Categories {
  data: CategoryData[]
}

export interface CategoryData {
  id: number
  attributes: CategoryAttributes
}

export interface CategoryAttributes {
  name: string
  status: boolean
  sort_order: number
  slug: string
}

export interface Meta {
  pagination: Pagination
}

export interface Pagination {
  page: number
  pageSize: number
  pageCount: number
  total: number
}

My Product Service.(product.service.ts)

getProducts(page:Number=1,pageSize:Number=3): Observable<Product[]> {
    return this.http
      .get<Product[]>(
        `${environment.baseUrl}products?populate=*&pagination[pageSize]=${pageSize}&pagination[page]=${page}`
      )
      .pipe(map(resp => resp));
  }

My Product Component.

retrieveProducts(): void {
    this.productService.getProducts(this.page,this.pageSize)
      .subscribe({
        next: (response) => {
          this.products=response.data;(Property 'data' does not exist on type 'Product[]'.)
          console.log(this.products);
        },
        error: (e) => console.error(e)
      });
  }

am not able to access response.data, response.data.id, etc... Property 'data' does not exist on type 'Product[]'.

Answer 1

Using JSON -> TS online converters I created some better Interfaces. Then you can access this.products?.data

products: Products;
 
retrieveProducts(): void {
    this.productService.getProducts(this.page,this.pageSize)
      .subscribe({
        next: (response) => {
          if (response?.data.length > 0) {
             this.products = response;
             console.log(this.products);
          }
        },
        error: (e) => console.error(e)
      });
  }

 export interface Products {
  data?: (DataEntity)[] | null;
  meta: Meta;
}

export interface DataEntity {
  id: number;
  attributes: Attributes;
}

export interface Attributes {
  name: string;
  description: string;
  price: number;
  status: boolean;
  sort_order: number;
  slug?: null;
  image: Image;
  categories: Categories;
}

export interface Image {
  data: Data;
}
export interface Data {
  id: number;
  attributes: Attributes1;
}

export interface Attributes1 {
  name: string;
  alternativeText: string;
  caption: string;
  url: string;
}
export interface Categories {
  data?: (DataEntity1)[] | null;
}
export interface DataEntity1 {
  id: number;
  attributes: Attributes2;
}

export interface Attributes2 {
  name: string;
  status: boolean;
  sort_order: number;
  slug: string;
}

export interface Meta {
  pagination: Pagination;
}

export interface Pagination {
  page: number;
  pageSize: number;
  pageCount: number;
  total: number;
}