How to fetch specific JSON data in Angular

Question

I am looking to fetch the details 'Contacts' from the below JSON.

{
"id": "65664546",
"name": "Employee 1",
"contacts": [
    {
        "id": "56546564",
        "firstName": "James",
        "lastName": "Carter",
        "email": "[email protected]"
    },
    {
        "id": "565465644",
        "firstName": "Simon",
        "lastName": "Deol",
        "email": "[email protected]"
    }
]

}

Below is the interface I have defined:

export interface employee {
  id: string;
  name: string;
  contacts: contact[];
}

export interface contact {
  firstName: string;
  lastName: string;
  email: string;
}

Please can you advise, what would the Httpget method and subscribe method for it look like.

Multiple employees so multiple contact arrays.. how would you like it? Or do you want to know how to display it? — MikeOne
– MikeOne, Commented Feb 13, 2021 at 15:45
Hi MikeOne, I would like to access Contacts for single selected employee. Thank you — Patty
– Patty, Commented Feb 13, 2021 at 15:50
@PratikSurani Please check my answer and let me know does it work for you or not. And also let me for farther help. Best wishes :-) — Srijon Chakraborty
– Srijon Chakraborty, Commented Feb 13, 2021 at 16:02
I am looking for the get and subscribe method to fetch this data and display in component template — Patty
– Patty, Commented Feb 13, 2021 at 23:38
@PratikSurani I have updated my answer please check now. :-) — Srijon Chakraborty
– Srijon Chakraborty, Commented Feb 14, 2021 at 3:01

Suraj Rawat · Accepted Answer · 2021-02-14 04:45:09Z

You have to use pluck rxjs operator to get specific key data from object and below is the code to get and subscribe data from API.

Here is the Working Example

appcomponent.ts

import { Component, VERSION } from "@angular/core";
import { pluck } from "rxjs/operators";
import { GetServiceService } from "./get-service.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  constructor(private getAPI: GetServiceService) {}
  ngOnInit() {
    this.getAPI
      .getData()
      .pipe(pluck("contacts"))
      .subscribe(r => {
        console.log(r);
      });
  }
}

getService.ts

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";
import { employee } from "./interface";


  export interface employee {
  id: string;
  name: string;
  contacts: contact[];
}

export interface contact {
  firstName: string;
  lastName: string;
  email: string;
}
@Injectable()
export class GetServiceService {
  constructor(private httpClient: HttpClient) {}
  getData(): Observable<employee> {
    // this.httpClient.get('url for api will be used')
    return of({
      id: "65664546",
      name: "Employee 1",
      contacts: [
        {
          id: "56546564",
          firstName: "James",
          lastName: "Carter",
          email: "[email protected]"
        },
        {
          id: "565465644",
          firstName: "Simon",
          lastName: "Deol",
          email: "[email protected]"
        }
      ]
    });
  }
}

Srijon Chakraborty · Accepted Answer · 2021-02-14 03:00:29Z

Firstly, there is a problem with Contact: Contacts[]; in employee interface. It should be Contacts: Contact[];. To convert string to JSON you can use code like =>

myEmpArray:employees;

ngOnInit(){
   this.myEmpArray = JSON.parse(this.temp); //Here temp is your JSON Text.
   let mycontact=this.myEmpArray.employees[0].Contacts[0];
   console.log(mycontact);
   console.log(this.myEmpArray);
  }

You can use http.get and subscribe Method like below =>

  myEmpArray:employees;
  constructor(private http: HttpClient) {
    this.http.get('https://jsonplaceholder.typicode.com/todos').subscribe((data) => {
      this.myEmpArray = data;
    });
  }

import { HttpClient } from '@angular/common/http'; import this line in your component file and import HttpClientModule in app.module.ts

Note: You can check how to use http GETin Angular in stackblitz. After getting the data you can parse JSON to object as given above.

Hi Linker, Thank you for your post. I am looking for Get method and Subscribe method. Please can you advise on that.

Collectives™ on Stack Overflow

How to fetch specific JSON data in Angular

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related