Question

我已经成功地通过Angular2中的http.get从API请求数据。这是我的http.get

this.http.get('http://localhost:8001/v1/recent', {
      headers: headers
  })
  .map(res => res.text())
  .subscribe(
    data => console.log(data.total),
    () => console.log('API request complete')
  );

API基于Laravel，它将返回如下数据

{
   "total": 8,
   "per_page": 50,
   "current_page": 1,
   "last_page": 1,
   "next_page_url": null,
   "prev_page_url": null,
   "from": 1,
   "to": 8,
   "data": [
      {
         "id": 1,
         "name": "John Doe",
         "author": {
            "isBlocked": "0",
         }
      },
      {
         "id": 1,
         "name": "John Doe",
         "author": {
            "isBlocked": "0",
         }
      }
    ]
}

如何在Angular2中检索上面的JSON对象？以及它的所有嵌套数组？

上面的

console.log(data.total)返回undefined

Answer 1

你问题中的json格式不正确，"isBlocked":"0"后面有一个额外的逗号（第15行和第22行）

"author": {
   "isBlocked": "0",
}

这会使它成为无效的JSON。防止Angular正确解析它。

另一个问题是，您正在调用.map(res => res.text())，它会将您的响应正文转换为字符串而不是对象。如果您想将其作为javascript对象，请改为.map(res => res.json())。

Here is a working plunker

在Angular2＆amp;中读取API响应离子的

1 个答案: