如何在 api 中将 JSON 对象转换为 Typescript 数组

Question

我有一个返回以下内容的 API 请求：

{
    "FarmerDetails": [
   {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  {
    "userId": 1,
    "id": 2,
    "title": "quis ut nam facilis et officia qui",
    "completed": false
  }
]
}

我需要在单击按钮时显示标题，并且当按钮单击此“fetchPeople()”函数时会被调用。

fetchPeople() {
    this.peopleService.fetchPeople().subscribe((res:any)=>{
      this.people$ = res;
    });
  }

如何在 typescript 中将我的对象转换为数组并显示特定或所有值。

Answer 1

处理 API 响应对象与处理任何其他 JSON 对象没有什么不同。以同样的方式查询即可。

给出这样的回应：

{
  "FarmerDetails": [
    // array of objects you want to extract from the response
  ]
}

您可以尝试多种方法。

1. 直接查询JSON对象

fetchPeople() {
  this.peopleService.fetchPeople().subscribe((res:any)=>{
    this.people = res.FarmerDetails;
  });
}

1. 管道中的地图

fetchPeople() {
  this.peopleService.fetchPeople().pipe(
    .map(res => res.FarmerDetails)
  ).subscribe(people => {
    this.people = people;
  });
}

当人员服务发出类似于上述 JSON 的值时，它会在 map 函数中应用转换，然后将其返回给订阅者。

1. 拔管

fetchPeople() {
  this.peopleService.fetchPeople().pipe(
    .pluck('FarmerDetails')
  ).subscribe(people => {
    this.people = people;
  });
}

与 map 类似，当人员服务发出类似于上述 JSON 的值时，它会在将其返回给订阅者之前，在 pluck 函数中返回命名属性。

方法 2 和 3 更可取，因为您可以将它们应用到您的服务中。假设这些来自 HTTP 请求，您可以在 get 之后使用管道：

export class PeopleService {
  fetchPeople() {
    return this.http.get(url).pipe(
      pluck('FarmerDetails')
    );
  }
}

此外，变量上的“$”后缀通常用于表示可观察对象。在您的示例中，您只是存储了 observable 发出的值，因此将其命名为 people$ 会令人困惑。为此，我将其命名为people。

Answer 2

当您从 api 获得响应时，它将以字符串格式返回。因此，您需要将其转换为 json 格式。解析成json：

this.people=JSON.parse(res);