How to extract a specific property from data using Angular's HttpClient-subscribe

Question

How to extract a specific property from data using Angular's HttpClient-subscribe

It seems like this question has been asked before, but I can't seem to find the answers or know what terms to search for.

I have a JSON file structured like this:

{
  "pages": [{
      "displayname": "PageA",
      "url": "http://google.de",
      "icon": "iconZ"
    },

    {
      "displayname": "PageB",
      "url": "http://www.pageb.co.uk",
      "icon": "iconY"
    }
  ],
  "icons": [{
      "alias": "iconZ",
      "filename": "iconZ.svg"
    },

    {
      "alias": "iconY",
      "filename": "iconY.svg"
    }
  ]
}

Currently, I am using the HttpClient (referred to as httpService) to fetch this data from the file.

this.httpService.get('./assets/pageconfig.json').subscribe(
      data => {
        this.arrAdress = data as string[];
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      }
    );

I am looking to use the 'pages' content in my ngFor loop in the Frontend and I also need an array of the icon data for use in the Backend. How can I extract this data based on the properties?

Appreciate your assistance, Elias

json angular typescript

Answer 1

Answer №1

If your pageconfig.json file is utilized in both the front and backend of your application, and you only require the "pages" attribute for your Angular app, you can retrieve it like this:

this.httpService.get('./assets/pageconfig.json').subscribe(
  data => {
    this.arrAdress = data.pages;
  },
  (err: HttpErrorResponse) => {
    console.log(err.message);
  }
);

There is no need to explicitly specify the data type.

Alternatively, you could utilize rxjs observable map chaining to parse the data and extract only the relevant information:

import { map } from 'rxjs/operators';

this.httpService.get('./assets/pageconfig.json')
  .pipe(map(data => data.pages))
  .subscribe(pages => {
    this.arrAdress = pages;
  }).catch((err: HttpErrorResponse) => {
    console.log(err.message);
  });

I trust this solution aligns with your requirements.

Answer 2

If your pageconfig.json file is utilized in both the front and backend of your application, and you only require the "pages" attribute for your Angular app, you can retrieve it like this:

this.httpService.get('./assets/pageconfig.json').subscribe(
  data => {
    this.arrAdress = data.pages;
  },
  (err: HttpErrorResponse) => {
    console.log(err.message);
  }
);

There is no need to explicitly specify the data type.

Alternatively, you could utilize rxjs observable map chaining to parse the data and extract only the relevant information:

import { map } from 'rxjs/operators';

this.httpService.get('./assets/pageconfig.json')
  .pipe(map(data => data.pages))
  .subscribe(pages => {
    this.arrAdress = pages;
  }).catch((err: HttpErrorResponse) => {
    console.log(err.message);
  });

I trust this solution aligns with your requirements.

Answer 3

Answer №2

It is recommended to replace string[] with an Array of objects or any type.

this.httpService.get('./assets/pageconfig.json').subscribe(
      data => {
        this.arrAdress = data;
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      }
    );

sendData(icon){
    const matched = this.arrAdress.icons.filter(iconObj => iconObj.alias === icon);
    console.log(matched);
  }

 **Template:**

  <div *ngFor="let adress of arrAdress?.pages;" (click)="sendData(adress.icon)">
    <span>{{adress.displayname}}</span>
  </div>

Answer 4

It is recommended to replace string[] with an Array of objects or any type.

this.httpService.get('./assets/pageconfig.json').subscribe(
      data => {
        this.arrAdress = data;
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      }
    );

sendData(icon){
    const matched = this.arrAdress.icons.filter(iconObj => iconObj.alias === icon);
    console.log(matched);
  }

 **Template:**

  <div *ngFor="let adress of arrAdress?.pages;" (click)="sendData(adress.icon)">
    <span>{{adress.displayname}}</span>
  </div>

Answer 5

Answer №3

If you are facing this issue, there are two solutions available for you.

Imagine that when you use the httpClient.Delete() option, it gives you an observable object with the employeeId as a property.

Solution 1 (for example)

Declare a local variable and assign the data to it using the let statement

(e.g. let response: any = data;).

delete(employee: any) {
    this.employeeService.deleteEmployee(employee.id)
        .subscribe(
            data => {
                let response: any = data;
                // now you can use response.employeeId
            },
            (error) => {
                console.log(error)
            },
            () => {
                console.log("The operation has been completed")
            }
        );
}

Solution 2 (for example)

Specify the type as any (e.g. (data : any) for the received response

delete(employee: any) {
    this.employeeService.deleteEmployee(employee.id)
        .subscribe(
            (data: any) => {
             // now you can use data.employeeId
            },
            (error) => {
                console.log(error)
            },
            () => {
                console.log("The operation has been completed")
            }
        );
}

Answer 6

If you are facing this issue, there are two solutions available for you.

Imagine that when you use the httpClient.Delete() option, it gives you an observable object with the employeeId as a property.

Solution 1 (for example)

Declare a local variable and assign the data to it using the let statement

(e.g. let response: any = data;).

delete(employee: any) {
    this.employeeService.deleteEmployee(employee.id)
        .subscribe(
            data => {
                let response: any = data;
                // now you can use response.employeeId
            },
            (error) => {
                console.log(error)
            },
            () => {
                console.log("The operation has been completed")
            }
        );
}

Solution 2 (for example)

Specify the type as any (e.g. (data : any) for the received response

delete(employee: any) {
    this.employeeService.deleteEmployee(employee.id)
        .subscribe(
            (data: any) => {
             // now you can use data.employeeId
            },
            (error) => {
                console.log(error)
            },
            () => {
                console.log("The operation has been completed")
            }
        );
}

How to extract a specific property from data using Angular's HttpClient-subscribe

Answer №1

Answer №2

Answer №3

Similar questions

Transmitting End of Transmission through Remote Socket

Utilizing JSON encoding with produces={"application/json; charset=UTF-8"} and the ObjectMapper technology

In Angular, the dropdown in reactive forms will not populate unless there is some interaction with the form

Picture is not appearing on the screen (Xamarin Forms)

Instead of returning a JSON result, the MVC controller method called from AngularJS is returning the view HTML

Adjust the contents of a DIV depending on which Toggle button is selected

Error message "UnrecognizedPropertyException: An unrecognized field error has occurred on an Android device

Language for describing JSON data structures

How can I securely access and load JSON data from a different domain?

The error message "Element is not defined (Object.<anonymous>)" is occurring in the context of Intro.js-react, React, Next.js, and Tailwind

FirebaseError: Trigger parsing error: Module 'grpc' not found

Assigning a value to an angular object

Having trouble converting an array of strings into a JSON ARRAY column in Snowflake

The challenges of handling dynamic controls and reactive forms in Angular when editing, and ways to effectively update their values

Graph your data with a stunning Fusioncharts area range graph combined with a sleek

The Angular HttpErrorResponse is a class used for handling

Page can be accessed using file_get_contents function but not with cURL

What techniques can be employed to dynamically modify Typescript's AST and run it while utilizing ts-node?

Error: The payload in action is not able to be iterated over

Creating an Overlay using a ScrollStrategy in a declarative way