Using Angular's Http Get to retrieve information from a json file

Question

Using Angular's Http Get to retrieve information from a json file

I need to extract only the 'firstName' values from the JSON data below using an Angular HttpGet method.

[
    {
    "id": "65664546",
    "name": "Employee 1",
    "contacts":
        {
            "id": "56546564",
            "firstName": "James",
            "lastName": "Carter",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6506041711001754555425020a0a0209004b060a08">[email protected]</a>"
        }
    },
    {
    "id": "65664547",
    "name": "Employee 2",
    "contacts":
        {
            "id": "56546565",
            "firstName": "Steve",
            "lastName": "Smith",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46352b2f322e3577767706212929212a236825292b">[email protected]</a>"
        }
    },
    {
    "id": "65664548",
    "name": "Employee 3",
    "contacts":
        {
            "id": "56546566",
            "firstName": "Anna",
            "lastName": "Marcus",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6805091a0b1d1b595859280f07070f040d460b0705">[email protected]</a>"
        }
    }
    ]

Can you provide guidance on how the Httpget method and subscribe method for this extraction should be written?

angular typescript

Answer 1

Answer №1

To achieve this, you can utilize the provided code snippet:

constructor(private http: HttpClient) { }

ngOnInit() {

   this.http.get("./assets/mydata.json")   // specify the path to your JSON file
       .pipe(
          map(emp => emp.map(e => e.contacts.firstName))
       ) // extract the first names from the "map" array in the JSON
       .subscribe(res => console.log(res));
}

Answer 2

To achieve this, you can utilize the provided code snippet:

constructor(private http: HttpClient) { }

ngOnInit() {

   this.http.get("./assets/mydata.json")   // specify the path to your JSON file
       .pipe(
          map(emp => emp.map(e => e.contacts.firstName))
       ) // extract the first names from the "map" array in the JSON
       .subscribe(res => console.log(res));
}

Answer 3

Answer №2

One immediate question arises - are you in control of the backend generating that JSON data? If so, you might consider creating a separate action method (perhaps following Microsoft's terminology) that specifically provides a list of strings containing only the firstName information. I won't delve into specific examples as I am unsure about the backend technologies you are using.

Alternatively, if you do not have control over the backend, there are still options available on your end.

One option is to subscribe to the HTTP stream and then map the results:

this.http.get("whatever").subscribe(res => res.map(x => x.firstName));

This is just an illustration and the actual application structure may vary. Subscription could occur within services, components, or utilize the async pipe.

Another approach would be to follow Nicholas K's recommendation and employ reactive programming with pipe(map(...)). I will refrain from reiterating his answer for clarity.

At present, I cannot think of any other alternatives.

Answer 4

One immediate question arises - are you in control of the backend generating that JSON data? If so, you might consider creating a separate action method (perhaps following Microsoft's terminology) that specifically provides a list of strings containing only the firstName information. I won't delve into specific examples as I am unsure about the backend technologies you are using.

Alternatively, if you do not have control over the backend, there are still options available on your end.

One option is to subscribe to the HTTP stream and then map the results:

this.http.get("whatever").subscribe(res => res.map(x => x.firstName));

This is just an illustration and the actual application structure may vary. Subscription could occur within services, components, or utilize the async pipe.

Another approach would be to follow Nicholas K's recommendation and employ reactive programming with pipe(map(...)). I will refrain from reiterating his answer for clarity.

At present, I cannot think of any other alternatives.

Using Angular's Http Get to retrieve information from a json file

Answer №1

Answer №2

Similar questions

Fetching JSON data using Promise.all results in an empty response

The initialization of Angular 5 services occurs prior to the completion of APP_INITIALIZER

Modify multiple elements in a nested array by utilizing the $set and $push operators

Set up the user django with standard configuration values

Exploring the World of Angular: Abstracts and Data Transformations

Guidelines for sorting a dataset according to the current UserID using angular2

Why is TypeScript giving an error about an undefined object key, even though the key was assigned a value in the previous command?

TypeScript's attempt to replicate Scala's underscore feature has been implemented, but it proves to

What is the best way to rid ourselves of unwanted values?

Where is the best place to import styles in NextJS?

I want to remove an object from my Django Rest Framework (DRF) database using Angular 13

Issue with displaying first label on X axis in Bar chart using Angular and ChartJS

Troubleshooting the lack of communication between multiple Subscribers in RxJS/Angular when sharing one observable

Encountering an issue while running the ng build --prod command in Angular

Issues with launching project following updates to Angular-cli

Utilizing Checkboxes for Filtering Mat-Table Data in Angular 8

The error message `Error [ERR_REQUIRE_ESM]: require() of ES Module` is triggered when attempting to call the old

Is it possible to send prop as an object property in a TypeScript-based React component?

What sets template-driven and reactive forms apart in practice?

Angular nested innerHTML not evaluating ternary operator