如何在Angular中获取特定的JSON数据

我希望从下面的JSON获取详细的“联系人”

{
"id": "65664546",
"name": "Employee 1",
"contacts": [
    {
        "id": "56546564",
        "firstName": "James",
        "lastName": "Carter",
        "email": "carter101@google.com"
    },
    {
        "id": "565465644",
        "firstName": "Simon",
        "lastName": "Deol",
        "email": "simon505@google.com"
    }
]

}

下面是我定义的接口：

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

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

---

请告诉我，Httpget方法和subscribe方法是什么样子的。

首先，

Contact:Contacts[]存在问题在
员工
界面中。应该是
联系人：联系人[]。要将
string
转换为
JSON
，可以使用=>

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);
  }

您可以使用下面的
http.get
和
subscribe
方法

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

从'@angular/common/http'导入{HttpClient}在组件文件中导入此行，并在
app.module.ts中导入
HttpClientModule

注意：您可以检查如何在中使用http
GET
。获取数据后，您可以将JSON解析为如上所示的对象。
您必须使用pulkrxjs操作符从对象获取特定的关键数据，下面是从API获取和订阅数据的代码。

这是你的电话号码

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: "carter101@google.com"
        },
        {
          id: "565465644",
          firstName: "Simon",
          lastName: "Deol",
          email: "simon505@google.com"
        }
      ]
    });
  }
}

从“@angular/common/http”导入{HttpClient}；
从“@angular/core”导入{Injectable}”；
从“rxjs”导入{可观察的}；
从“/interface”导入{employee}；
导出接口员工{
id：字符串；
名称：字符串；
联系人：联系人[]；
}
导出接口联系人{
名字：字符串；
lastName:string；
电子邮件：字符串；
}
@可注射（）
导出类GetServiceService{
构造函数（私有httpClient:httpClient）{}
getData（）：可观察{
//this.httpClient.get（'将使用api的url'）
归还({
id:“65664546”，
姓名：“员工1”，
联系人：[
{
id:“56546564”，
名字：“詹姆斯”，
姓：“卡特”，
电子邮件：“carter101@google.com"
},
{
id:“565465644”，
名字：“西蒙”，
姓：“迪欧”，
电子邮件：“simon505@google.com"
}
]
});
}
}
多个员工，因此有多个联系人阵列。。你想要什么样的？或者您想知道如何显示它吗？嗨，MikeOne，我想访问单个选定员工的联系人。感谢you@PratikSurani请检查我的答案，让我知道它是否适合你。也让我来寻求进一步的帮助。最好的祝愿：-）我正在寻找get和subscribe方法来获取此数据并在组件中显示template@PratikSurani我已经更新了我的答案，请现在查看。：-）嗨，链接者，谢谢你的帖子。我正在寻找获取方法和订阅方法。请你提供建议。嗨，苏拉杰，非常感谢你的帮助。它确实奏效了！谢谢你能帮我把答案标对吗？对不起，我忘了做那件事。现在就好了，谢谢