Using Angular, we can make an HTTP call and map the response to an

Question

Using Angular, we can make an HTTP call and map the response to an

I have a function that fetches information from a REST API in this format:

getProducts(category: string): Observable<IProduct[]> {
    let url = `/rest/getproducts?category=${category}`;
    return this._http.get<IProduct[]>(url);
  }

The data returned by the service is structured like below:

[
  {
    "ProductId": 1,
    "CategoryType": "XC",
    "Name": "Prod A"
  },
  {
    "ProductId": 2,
    "CategoryType": "XY",
    "Name": "Prod B"
  },
]

This is how my model is defined:

export interface IProduct {
    id: string;
    type: string;
    name: string;
}

Is there an easy way to map the response from the service to fit my model structure? Should I use the map function for this task? While I can adjust the model to match the response, I prefer to find a way to adapt the response to fit my existing model (the example provided has been simplified).

angularjs typescript

Answer 1

Answer №1

Opting for an interface that mirrors the server data structure can streamline the process, eliminating headaches associated with mapping and reducing maintenance requirements.

It's advisable to still create an interface for the server object even if some mapping is necessary to ensure safe data manipulation:

interface IServerProduct {
    "ProductId": number;
    "CategoryType": string;
    "Name": string;
}

export interface IProduct {
    id: string;
    type: string;
    name: string;
}

getProducts(category: string): Observable<IProduct[]> {
    let url = `/rest/getproducts?category=${category}`;
    return this._http.get<IServerProduct[]>(url).pipe(
        map(o => o.map((sp): IProduct => ({ // Defining IProduct here triggers excess property checks
            id: sp.ProductId + '', // Transforming number from server into string 
            name: sp.Name,
            type: sp.CategoryType,
            typeMisaken: sp.CategoryType, // Potential error flagged here
        })))
    );
}

Answer 2

Opting for an interface that mirrors the server data structure can streamline the process, eliminating headaches associated with mapping and reducing maintenance requirements.

It's advisable to still create an interface for the server object even if some mapping is necessary to ensure safe data manipulation:

interface IServerProduct {
    "ProductId": number;
    "CategoryType": string;
    "Name": string;
}

export interface IProduct {
    id: string;
    type: string;
    name: string;
}

getProducts(category: string): Observable<IProduct[]> {
    let url = `/rest/getproducts?category=${category}`;
    return this._http.get<IServerProduct[]>(url).pipe(
        map(o => o.map((sp): IProduct => ({ // Defining IProduct here triggers excess property checks
            id: sp.ProductId + '', // Transforming number from server into string 
            name: sp.Name,
            type: sp.CategoryType,
            typeMisaken: sp.CategoryType, // Potential error flagged here
        })))
    );
}

Answer 3

Answer №2

If you prefer not to make any changes to the code, your interface should resemble the example below. Alternatively, you can use the array.map function to create your own array.

declare module namespace {
    export interface IProduct {
        ProductId: number;
        CategoryType: string;
        Name: string;
    }
}

If you'd like to see how it looks without altering anything, you can try using json2ts

Answer 4

If you prefer not to make any changes to the code, your interface should resemble the example below. Alternatively, you can use the array.map function to create your own array.

declare module namespace {
    export interface IProduct {
        ProductId: number;
        CategoryType: string;
        Name: string;
    }
}

If you'd like to see how it looks without altering anything, you can try using json2ts

Using Angular, we can make an HTTP call and map the response to an

Answer №1

Answer №2

Similar questions

Utilize the array map function in a React Native functional component with useState to dynamically render content

NextJS: Build error - TypeScript package not detected

Struggling to access the production API results in a frustrating 404 error

Ways to initialize Nested Arrays in Angular applications

Module 'fs' or its type declarations could not be located

Creating a comprehensive object within a single interface using Typescript

Angular Directive for dragging and dropping elements within an iFrame

Why is my specified state not being recognized?

The benefits of a modular design in a React and TypeScript library

Utilizing a class member's data type

Invoke the LazyQuery Hook within a Function

Can TypeScript automatically deduce keys from a changing object structure?

How does Jasmine compare to the second parameter with the toBeCloseTo function?

TypeScript: implementing function overloading in an interface by extending another interface

What is the best way to fetch information from an external json api using angularJS?

Toggle checkbox feature in Bootstrap not functioning properly when placed within ng-view

Using AngularJS for client side validation and Asp.net MVC for server side validation

Preparing data for posting in AngularJS is crucial for ensuring proper formatting of the content

Strategies for extracting information from JSON data and presenting it using AngularJS

Angular's vs-repeat continues to fire scroll events until it reaches the bottom, occasionally also triggering events when it