Angular2 http 获取第一个元素

Question

我只想从此 JSON 文件中获取 "id" 元素的值：

{
"data": {
    "id": 2,
    "first_name": "lucille",
    "last_name": "bluth",
    "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
}

}

这是我获取数据的代码：

getData() {

    return this.http.get('https://reqres.in/api/users/2')
    .map((respone: Response) => respone.json());
}

我怎样才能只得到 'id' 值？

Answer 1

假设您要从您的服务中返回一个 Observable，你可以使用各种 RxJs 的第一个运算符

this.serviceName.getData().first(x => console.log(x.id)) //logs the first id
                          .subscribe(data => console.log(data); // logs the stream of data

Answer 2

假设你使用的是RxJs，你调用getData()后，你必须订阅结果，然后解析数据。

即

this.getData().subscribe(result => {

    // handle the response

    return result.data.id;

});

Answer 3

您还可以执行以下操作：

getData() {
    return this.http.get('https://reqres.in/api/users/2')
                    .map((respone: Response) => respone.json().data.id);
}

将 return 只有来自响应的 id 字段而不是整个数据对象。

Answer 4

您也可以在显示数据的组件 HTML 中执行此操作。例如：

<div *ngFor = 'let first of http'>
    {{first.id}}
</div>

Angular2 http 获取第一个元素

Angular2 http get first element

get

http

subscribe

observable

angular