Javascript 将响应映射到可变角度5

我使用HttpClient调用get请求，该请求以以下格式返回响应

{
    "organizations": [
        {
            "id": 1,
            "name": "Team Red",
            "address": null,
            "sites": [
                {
                    "organization": 1,
                    "name": "Site A",
                    "address": null,
                    "lat": null,
                    "lon": null,
                    "id": 1,
                    "createdAt": "2017-10-23T11:07:11.000Z",
                    "updatedAt": "2017-10-23T11:07:11.000Z"
                },
                {
                    "organization": 1,
                    "name": "Site B",
                    "address": null,
                    "lat": null,
                    "lon": null,
                    "id": 2,
                    "createdAt": "2017-10-23T11:07:11.000Z",
                    "updatedAt": "2017-10-23T11:07:11.000Z"
                },
                {
                    "organization": 1,
                    "name": "Site C",
                    "address": null,
                    "lat": null,
                    "lon": null,
                    "id": 3,
                    "createdAt": "2017-10-23T11:07:11.000Z",
                    "updatedAt": "2017-10-23T11:07:11.000Z"
                }
            ]
        },
        {
            "id": 2,
            "name": "Team Blue",
            "address": null,
            "sites": [
                {
                    "organization": 2,
                    "name": "Site X",
                    "address": null,
                    "lat": null,
                    "lon": null,
                    "id": 4,
                    "createdAt": "2017-10-23T11:07:11.000Z",
                    "updatedAt": "2017-10-23T11:07:11.000Z"
                },
                {
                    "organization": 2,
                    "name": "Site Y",
                    "address": null,
                    "lat": null,
                    "lon": null,
                    "id": 5,
                    "createdAt": "2017-10-23T11:07:11.000Z",
                    "updatedAt": "2017-10-23T11:07:11.000Z"
                },
                {
                    "organization": 2,
                    "name": "Site Z",
                    "address": null,
                    "lat": null,
                    "lon": null,
                    "id": 6,
                    "createdAt": "2017-10-23T11:07:11.000Z",
                    "updatedAt": "2017-10-23T11:07:11.000Z"
                }
            ]
        }
    ]
}

我需要直接将响应映射到组织变量。我已附上服务文件代码，以及组织和网站文件。 我得到的错误是response.json（）上的错误，我搜索到该函数不可用。任何帮助都将不胜感激

从“/Site”导入{Site}；
出口类组织{
id：编号；
名称：字符串；
地址：字符串；
地点：地点[]；
构造函数（值：Object={}）{
对象。分配（此，值）；
}
}
---------
导出类站点{
组织机构：编号；
名称：字符串；
地址：字符串；
lat：字符串；
lon：数字；
id：编号；
createdAt:string；
更新日期：编号；
}
----API服务----
从“@angular/core”导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“./models/Organization”导入{Organization}；
进口“rxjs/Rx”；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/catch”；
导入“rxjs/add/observable/throw”；
常量API_URL=”http://localhost:1337/api";
@可注射（）
出口级服务{
构造函数（专用http:HttpClient）{
}
public getOrganizationWithSites（）：可观察{
const headers=新的HttpHeaders（）
.set（“授权”、“持票人eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.EYJPZCI6MTESIM5HBWUIOIJBGLMIIWIAW0IJOXNTIWMJ2NDQWLCJLEHAIOJE1MJAZNTI4NDB9.GW5P7zDow4PcI9RaB3pn6KxPn929pmzPCnce6n8OCo8”）；
让组织：任何；
变量选项={
标题：标题
};
返回此文件。http
.get（API_URL+'/用户/组织），选项）；
}
//私有句柄错误（错误：响应|任意）{
//console.error（'ApiService:：handleError'，error）；
//返回可观察抛出（错误）；
// }
}
//组件代码
恩戈尼尼特（）{
这是我们的服务
.getOrganizationWithSites（）
.订阅（（数据）=>{
这就是组织=数据；
});
console.log（this.organizations）；
}

HttpClient API是在版本4.3.0中引入的。它是对现有HTTP API的改进，并有自己的包@angular/common/HTTP。最值得注意的变化之一是，现在响应对象默认为JSON，因此不再需要使用map方法对其进行解析

return http.get(API_URL + '/user/organizations', options);

然后在组件中

@Component({
    selector: 'my-component',
    templateUrl: './MyComponent.component.html'
})
export class MyComponent{

    public organizations : Organization[] = [];

    constructor(private apiService: ApiService) {
        this.apiService
           .getOrganizationWithSites()
           .subscribe((data) => {
             this.organizations = data;
             console.log(this.organizations);


            });
        }
}

---

从

response.json（）中删除
json
部分无需执行此操作<代码>HttpClient

隐式执行

---

更多信息

新的HttpClient类不需要解析对json的响应，因此，您得到的响应就是您想要的响应need@Ricardo我更新了APIService的方法，并添加了oginit（）方法。它的印刷方式被升级了。请检查文档（）我检查了一下，您似乎缺少了您想要观察的值和响应type@Ricardo，你能帮我指出我犯的错误吗。由于我对Angularcheck这个url还不熟悉，我将尝试为您创建一个示例，另一件事：subscribe方法像第二个参数一样接收接收错误的函数，传递第二个函数，并尝试查看错误是否来自后端。组织指的是什么？在我的例子中没有变量，我需要将可观察的返回给将调用该方法的组件。@AtifJaved然后您的服务将只返回可观察的“return http.get（API_URL+”/user/organizations'，options）；”。进行调用的组件将订阅调用并使用结果。它的印刷方式被升级了。请查收

@Component({
    selector: 'my-component',
    templateUrl: './MyComponent.component.html'
})
export class MyComponent{

    public organizations : Organization[] = [];

    constructor(private apiService: ApiService) {
        this.apiService
           .getOrganizationWithSites()
           .subscribe((data) => {
             this.organizations = data;
             console.log(this.organizations);


            });
        }
}