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

Question

我希望从下面的 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 方法是什么样的。

Answer 1

您必须使用 pluck rxjs 运算符从对象中获取特定的关键数据，下面是从 API 获取和订阅数据的代码。

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

Answer 2

首先，employee接口中的Contact: Contacts[];有问题。应该是Contacts: Contact[];。要将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;
    });
  }

import { HttpClient } from '@angular/common/http';在你的组件文件中导入这一行并在app.module.ts中导入HttpClientModule

注意：您可以在stackblitz 中查看如何在Angular 中使用http GET。获取数据后，您可以将 JSON 解析为上面给出的对象。