Difficulty encountered when converting objects into an array of a model within Angular

Question

Difficulty encountered when converting objects into an array of a model within Angular

Below you will find the service code that I am using:

export class ProductListService {

  constructor(private httpClient: HttpClient) {

  }
  getProducts(): Observable<IResponse> {
    return this.httpClient.get<IResponse>('https://localhost:7127/Product/GetProductList');
  }
}

In addition, here is the component I have implemented:

  getProducts(): void {
    this.productsService.getProducts()
      .subscribe((response: IResponse) => {
       this.products = <Product[]>response.data;
      })
  }

The models for Product and IResponse are defined as follows:

export interface Product {
  Id: string;
  Title: string;
  Description: string;
  ImageUri: string;
  CategoryId: string;
}

export interface IResponse {
  data: object;
  status: number;
}

When retrieving data from the API, it returns a structure like this:

{
   "data": [
      {
         "id": "e15",
         "title": "LED TV 42 inch ",
         "description": "-",
         "imageUri": "C:\\wwwroot/cdn\\e15.jpg",
         "categoryId": "tv"
      },
      {
         "id": "e16",
         "title": "LED TV 52 inch ",
         "description": "-",
         "imageUri": "C:\\wwwroot/cdn\\e16.jpg",
         "categoryId": "tv"
      }
   ],
   "status": 200
}

To store this data in my products variable, how should I proceed?

json angular typescript

Answer 1

Answer №1

I echo Sean Chase's sentiments. Adjust the casing of your model and consider converting the data property on the IResponse interface to Product[] (just a side note, interfaces typically don't start with I as per C# convention).

Are you utilizing the products property in the template HTML? If yes, you can employ the pipe async syntax and substitute the products property with an Observable<Product[]>. Here's an illustration

// models.ts
export interface Product {
    id: string;
    title: string;
    description: string;
    imageUri: string;
    categoryId: string;
}

export interface IResponse {
    data: Product[];
    status: number;
}



// product-list.component.ts
import { Component, OnInit } from '@angular/core';
import { map, Observable, of, Subscription } from 'rxjs';
import { IResponse, Product } from './models';
import { ProductListService } from './products-list.service';

@Component({
    selector: 'product-list',
    template: `
        <div *ngFor="let product of products$ | async">
            <div>Id: {{ product.id }}</div>
            <div>Title: {{ product.title }}</div>
            <div>Description: {{ product.imageUri }}</div>
            <div>CategoryId: {{ product.categoryId }}</div>
        </div>
    `
})
export class ProductListComponent implements OnInit {
    products$: Observable<Product[]> = of([]);

    constructor(private productsListService: ProductListService) {}

    ngOnInit() {
        this.products$ = this.productsListService.getProducts().pipe(map((res: IResponse) => res.data));
    }
}


// product-list.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { IResponse, Product } from './models';

@Injectable({
    providedIn: 'root',
})
export class ProductListService {
    // constructor(private httpClient: HttpClient) {}

    getProducts(): Observable<IResponse> {
        // return this.httpClient.get<IResponse>('https://localhost:7127/Product/GetProductList');
        return of({
            data: [
                {
                    id: '1',
                    title: 'title-1',
                    description: 'description-1',
                    imageUri: '/images/image-1.jpg',
                    categoryId: '1'
                } as Product,
                {
                    id: '2',
                    title: 'title-2',
                    description: 'description-2',
                    imageUri: '/images/image-2.jpg',
                    categoryId: '2'
                } as Product,
            ],
            status: 200
        });
    }
}

Answer 2

I echo Sean Chase's sentiments. Adjust the casing of your model and consider converting the data property on the IResponse interface to Product[] (just a side note, interfaces typically don't start with I as per C# convention).

Are you utilizing the products property in the template HTML? If yes, you can employ the pipe async syntax and substitute the products property with an Observable<Product[]>. Here's an illustration

// models.ts
export interface Product {
    id: string;
    title: string;
    description: string;
    imageUri: string;
    categoryId: string;
}

export interface IResponse {
    data: Product[];
    status: number;
}



// product-list.component.ts
import { Component, OnInit } from '@angular/core';
import { map, Observable, of, Subscription } from 'rxjs';
import { IResponse, Product } from './models';
import { ProductListService } from './products-list.service';

@Component({
    selector: 'product-list',
    template: `
        <div *ngFor="let product of products$ | async">
            <div>Id: {{ product.id }}</div>
            <div>Title: {{ product.title }}</div>
            <div>Description: {{ product.imageUri }}</div>
            <div>CategoryId: {{ product.categoryId }}</div>
        </div>
    `
})
export class ProductListComponent implements OnInit {
    products$: Observable<Product[]> = of([]);

    constructor(private productsListService: ProductListService) {}

    ngOnInit() {
        this.products$ = this.productsListService.getProducts().pipe(map((res: IResponse) => res.data));
    }
}


// product-list.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { IResponse, Product } from './models';

@Injectable({
    providedIn: 'root',
})
export class ProductListService {
    // constructor(private httpClient: HttpClient) {}

    getProducts(): Observable<IResponse> {
        // return this.httpClient.get<IResponse>('https://localhost:7127/Product/GetProductList');
        return of({
            data: [
                {
                    id: '1',
                    title: 'title-1',
                    description: 'description-1',
                    imageUri: '/images/image-1.jpg',
                    categoryId: '1'
                } as Product,
                {
                    id: '2',
                    title: 'title-2',
                    description: 'description-2',
                    imageUri: '/images/image-2.jpg',
                    categoryId: '2'
                } as Product,
            ],
            status: 200
        });
    }
}

Difficulty encountered when converting objects into an array of a model within Angular

Answer №1

Similar questions

Using Python to generate a JSON file containing a list of artifacts through a loop

Display identical text using JavaScript filter

What is the proper way to incorporate the "pdf" package into a TypeScript project?

Reduce the use of if statements

A guide on incorporating dynamic formControlName functionality into AngularJs2

The jquery methods might encounter an issue with an undefined object

Utilizing a variety of Angular modules within Asp.Net Core

Convert a collection of objects into a structured object containing arrays using the power of jq

Two paths for a single Angular component

Obtain every definition for a specific word in JSON format

Streamlined conversion of JSON data to and from numerous small files

The MongoDB connection in NextJS 14 is causing a delay in loading the page

Utilizing PHP to parse JSON data and showcase the output

Execution of the RxJS pipe Finalize operator initiated prior to Observable finalization

Error message: "An issue occurred in Android where a java.lang.String value in the result cannot be converted to a JSONArray."

Angular mat-table experiencing issues with matToolTip functionality

Struggling to tally the entries and authenticate logins within Ionic 3 and Angular

Deciphering the evolution of APIs and managing internal API systems

Parsing a JSON array containing objects with numerical keys in ASP.NET - A step-by-step guide

Unable to retrieve data with $.getJSON