Retrieve the essential information needed from the REST API

Question

Retrieve the essential information needed from the REST API

I have a test wordpress blog set up. To enhance the functionality, I developed an angular app that utilizes the wordpress rest api. The app makes a call to an endpoint to retrieve categories. However, the JSON response contains unnecessary data for my application. As a solution, I created a model with specific values such as name and slug. Yet, when I log the response to the console, it still shows all the data. How can I limit this?

Code:

model

  export interface BlogCategoryModel {
    id: number;
    name: string;
    slug: string;
    parent: number;
  }

service

  getCategories(): Observable<BlogCategoryModel[]> {
    const url = 'https://blog.varanjith.com/wp-json/wp/v2/categories';
    return this.http.get<BlogCategoryModel[]>(url);
  }

component

  ngOnInit() {
    this.blogService.getCategories().subscribe((x: BlogCategoryModel[]) => {
      console.log(x);
    });
  }

output

https://i.sstatic.net/hUxsj.png

Why am I seeing count and description in the console output? What could be causing this issue? I did not include count and description in the BlogCategoryModel.

angular typescript

Answer 1

Answer №1

Make sure to understand the inner workings of TypeScript and HTTP client properly : )

If you provide a type parameter to the HTTP client, it won't directly impact the response; instead, it assigns a type definition to it. This type definition can vary based on your requirements.

It's crucial for you to parse this data and only extract the properties that are necessary for your application.

In your scenario, you should map the response first using the map method and then iterate through the categories array to select the essential properties.

getCategories(): Observable<BlogCategoryModel[]> {
    const url = 'https://blog.varanjith.com/wp-json/wp/v2/categories';
    return this.http
        .get<BlogCategoryModel[]>(url)
        .pipe(
            map(categories =>
                categories.map(({ id, name, slug, parent }) => ({ id, name, slug, parent }))
            )
        );
}

Check out this Stackblitz example for a demonstration.

Answer 2

Make sure to understand the inner workings of TypeScript and HTTP client properly : )

If you provide a type parameter to the HTTP client, it won't directly impact the response; instead, it assigns a type definition to it. This type definition can vary based on your requirements.

It's crucial for you to parse this data and only extract the properties that are necessary for your application.

In your scenario, you should map the response first using the map method and then iterate through the categories array to select the essential properties.

getCategories(): Observable<BlogCategoryModel[]> {
    const url = 'https://blog.varanjith.com/wp-json/wp/v2/categories';
    return this.http
        .get<BlogCategoryModel[]>(url)
        .pipe(
            map(categories =>
                categories.map(({ id, name, slug, parent }) => ({ id, name, slug, parent }))
            )
        );
}

Check out this Stackblitz example for a demonstration.

Answer 3

Answer №2

Typescript doesn't dictate to the API what data it must return or exclude. In order to selectively choose fields from your model, you can manage the response using the map operator:

fetchCategories(): Observable<BlogCategoryModel[]> {
    const url = 'https://blog.varanjith.com/wp-json/wp/v2/categories';
    return this.http.get<BlogCategoryModel[]>(url).pipe(
       map((result: any[]) => {
           return result.map((category: any) => {
               return {
                   id: category.id,
                   name: category.name,
                   slug: category.slug,
                   parent: category.parent
               }
           })
       })
    );
  }

Answer 4

Typescript doesn't dictate to the API what data it must return or exclude. In order to selectively choose fields from your model, you can manage the response using the map operator:

fetchCategories(): Observable<BlogCategoryModel[]> {
    const url = 'https://blog.varanjith.com/wp-json/wp/v2/categories';
    return this.http.get<BlogCategoryModel[]>(url).pipe(
       map((result: any[]) => {
           return result.map((category: any) => {
               return {
                   id: category.id,
                   name: category.name,
                   slug: category.slug,
                   parent: category.parent
               }
           })
       })
    );
  }

Retrieve the essential information needed from the REST API

Answer №1

Answer №2

Similar questions

Learn how to configure an Angular2 Template Driven form element by implementing two-way binding and integrating template driven form validation techniques

Currently, I am working on developing a to-do task manager using Angular 2. One of the tasks I am tackling involves updating the value

Using Angular 2 to toggle the visibility of a component when hovering over and moving away from it

Elements are unresponsive to scrolling inputs

Utilizing pattern matching in switch statements

Angular is unable to iterate through a collection of ElementRef instances

Angular 9: Subscribing triggering refreshing of the page

Issue: Unrecognized element type in next.js while starting development server

Transport parameter via routerLink to a different component

Angular - Acquire reference to the <audio> element

Verify and retrieve information from the Dynamics CRM Web API with the help of Angular 2 (TypeScript)

Navigating with Angular inside an HTTP POST Observable and subscription

The PrimeNG FullCalendar feature seems to be malfunctioning and cannot be located

What are the steps for deploying an Angular 6 application on an Express server?

Discover the steps to include the property within the data model in Angular specifically meant for showcasing on the user interface list page

How is it possible that this is not causing a syntax or compile-time error?

Issues arise when attempting to override attributes within the HTML of a parent component in Angular

To use the ModuleWithProviders<T> in the angular-autofocus-fix package, you must provide 1 type argument

Disable button attribute in Angular unit testing when form is not valid

Angular 8: A Guide to Updating Tags in innerHTML