如何将 JSON object 转换为 api 中的 Typescript 数组

Question

我有一个 API 请求，其中 returns 以下内容：

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

如何将我的 Object 转换为打字稿中的数组并显示特定或所有值。

Answer 1

当您收到来自 api 的响应时，它将以字符串格式 return。因此，您需要将其转换为 json 格式。将其解析为 json:

this.people=JSON.parse(res);

Answer 2

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

给出这样的回复：

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

您可以尝试多种方法。

直接查询JSON对象

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

管道中的地图

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

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

拔管

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

类似于地图，当人民服务发出一个看起来像上面的 JSON 的值时，它 returns 在返回之前在 pluck 函数中命名为属性它给订阅者。

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

之后使用管道

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

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

如何将 JSON object 转换为 api 中的 Typescript 数组

How to convert JSON object to an Typescript array in an api

arrays

json

angular-cli

angular