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

我收到一个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中的数组并显示特定值或所有值。

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

this.people=JSON.parse(res);

---

处理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（）{
此.peopleService.fetchPeople（）管道(
.map（res=>res.FarmerDetails）
).订阅（人=>{
这个。人=人；
});
}

当people服务发出一个类似于上面JSON的值时，它会在将其返回给订阅者之前在

map

函数中应用转换

拔管子

fetchPeople（）{
此.peopleService.fetchPeople（）管道(
.拔毛（‘农场细节’）
).订阅（人=>{
这个。人=人；
});
}

与map类似，当people服务发出一个类似于上面的JSON的值时，它将在

pull

函数中返回命名属性，然后再将其返回给订阅者

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

导出类PeopleService{
人物（）{
返回此.http.get（url）.pipe(
拔毛（‘农场细节’）
);
}
}

---

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

people$

会让人感到困惑。出于这个原因，我给它命名为

people

。

这可能会对您有所帮助@Mitesh jadav，是的，我也尝试过，现在正在使用angular 8。您是否尝试过console.log（res.FarmerDetails）；？感谢您在@Kurt Hamilton，在postman am中使用URL“”的POST请求，在我的服务文件中使用代码

headers=new HttpHeaders（{‘授权’：‘承载uRf0e8upueR4qTh…，‘InstanceName’：‘Orisa’，‘内容类型’：‘应用程序/json’}）的宝贵时间；fetchPeople（）{返回this.http.post（'http://169.38.82.132:94/GetFarmerInfo“，{headers:this.headers}）；}所以我试图从这个API中提取数据，结果如上所述，如果我将代码更新为“POST 401（未经授权）”，请将所有相关代码添加到您的问题中。您询问了如何从响应中获取值，但听起来您有一个完全不同的问题。我的stackblitz代码url，在本例中，如果我在people.service.ts中传递api“”，而不是“”，则无法工作。正如在示例api中一样，json响应是json数组，而我的响应是带有数组的json对象，因此我尝试将json对象转换为数组以获得响应。希望这一点清楚…我已经给出了您的示例，为了演示的目的，我将使用

的而不是http请求在您的结构中返回一个对象。这里我演示了

map

和

pulk

的用法：我已经更新了我的stackblitz，以发出一个真正的http请求，按照您描述的方式获取数据。您能记录这个吗？您得到响应了吗？在控制台中，我得到了“POST 401（未经授权）”。然后，这与您的问题完全不同。它没有返回响应，您如何将json对象转换为数组？根据错误，您是未经授权的。可能是，您需要一些凭据。