Question

我需要使用httpclient

创建一个简单的crud

如何正确获取此嵌套json的请求数据？

JSON

{
    "resource": {
        "date": "2018-03-28T11:30:00",
        "observation": "truck stop schedule",
        "place": "truck garage"
    },
    "errors": null,
    "message": null
}

服务

get(id: number){
    return this.http.get(environment.apiUrl + id + "/stopschedule")
    .catch(this.errorHandler);
}

delete(id: number) {
    return this.http.delete(environment.apiUrl + id + "/stopschedule")    
    .catch(this.errorHandler);
}

update(Travel, id: number) {
    return this.http.put(environment.apiUrl + id + "/stopschedule", Travel)
    .catch(this.errorHandler);
}

errorHandler(error: HttpErrorResponse) {
    return Observable.throw(error.message)
}

型号

export class Travel {
    date: Date;
    place: string;
    observation: string;
}


export class ResponseDetails { 
    errors:string;
    message : string; 
}

import { Travel} from './travel';
export class Response extends ResponseDetails{
    travel : Travel; 
}

Component.ts

//Get data
this.getData = this.travelService.get(this.id)
    .subscribe(result => this.data = result['resource'], result =>  this.erro = true);

我试过这种方式，但我的请求是返回一个未定义的对象。

Answer 1

您的result可能不是json正文，而是整个响应对象，因此它不包含resource属性。要从响应中检索正文，您需要调用json()方法：

this.getData = this.travelService.get(this.id)
  .map(response => response.json())
  .subscribe(result => this.data = result['resource'], result =>  this.erro = true);

Answer 2

您的API看起来很奇怪，但可能只是一个解释问题。它作为一个响应有意义，其中错误和消息在有效载荷中，但不是作为post，如果是这种情况，@ krystianpe的答案是正确的方法，我必须添加，如果使用新的HttpClient，地图来自如果angular可以判断出json是一个json（响应类型：来自服务器或类似的应用程序/ json头），json会自动完成。

无论如何，我会快速解释一下我认为是一种更好的惯用REST API：

创建新计划

发布：http://localhost/api/schedule 正文：{ ＆＃34; date＆＃34;：＆＃34; 2018-03-28T11：30：00＆＃34;，＆＃34;观察＆＃34;：＆＃34;创建一个新的时间表＆＃34;，＆＃34;地点＆＃34;：＆＃34;卡车车库＆＃34; }

返回所有有效时间表

获取：http://localhost/api/schedule

如果您需要过滤器，您有两种选择：

最简单的方法是传递参数：http://localhost/api/schecule?active=false。使用angular URLSearchParams
为更复杂或更软化的内容创建请求标头（从未见过任何内容）。使用HttpHeaders

编辑时间表：

PUT ：/ api / schedule / 1

正文：{ ＆＃34; date＆＃34;：＆＃34; 2018-03-28T11：30：00＆＃34;，＆＃34;观察＆＃34;：＆＃34;新观察＆＃34;，＆＃34;地点＆＃34;：＆＃34;新地方＆＃34; }

您有两种选择： 1.传递整个对象并更新所有属性（最简单） 2.仅传递被更改的属性。

删除就像

删除：/ api / 1

如果你需要知道卡车有什么时间表你把它放在有效载荷（车身）上：{ ＆＃34; date＆＃34;：＆＃34; 2018-03-28T11：30：00＆＃34;，＆＃34;观察＆＃34;：＆＃34;新观察＆＃34;，＆＃34;地点＆＃34;：＆＃34;新地方＆＃34;，＆＃34; truck_id＆＃34;：1 }

启动/停止计划，这是您的主要问题，我认为，您有更多的灵活性。以下是一些方法：

PUT ：/ api / schedule / 1 / start PUT ：/ api / schedule / 1 / stop

PUT ：/ api / schedule / 1 / actions BODY：{＆＃34;州＆＃34;：＆＃34;开始＆＃34;，＆＃34;当＆＃34;：＆＃34;现在＆＃34;}

PUT表示您正在以某种方式更新系统状态。但看起来你和＃34; Start＆＃34;对象或＆＃34;动作＆＃34;对象并正在改变这一点。所以我更愿意：

PUT / POST / GET ：/ api / schedule / 1 / actions / start

使用 PUT 表示操作是幂等的（这是一个混淆的单词），它只更改计划并且没有其他副作用。我认为是这样的。使用 POST 表示不是幂等的动作，副作用未知或影响他人。使用 GET 来调用只准备且在系统中没有副作用的操作（例如发送电子邮件）

您可以而且应该在正文中传递参数（在这种情况下，您正在配置启动参数），GET除外（没有意义，请使用URLParams）

https://github.com/restfulobjects/restfulobjects-spec/blob/2180261f47b7e9279bdb18180ffbee1430b1e342/restfulobjects-spec.pdf?raw=true

stackoverflow中有一个话题：REST actions and URL API design considerations

Answer 3

在服务使用中＆＃34; map＆＃34;改变回应

get(id: number){
    return this.http.get(environment.apiUrl + id + "/stopschedule")
    .map(response=>response.resource); //NOT return response, just response.resource
    .catch(this.errorHandler);
}

Answer 4

如果您使用HttpClient API我建议您将模型更改为：

class ServerResponse<T> {
  resource: T;
  errors: string;
  message: string;
}

class Travel {
  date: Date;
  place: string;
  observation: string;
}

然后映射您的服务器请求，如：

get(id: number): Observable<ServerResponse<Travel>>{
    return this.http.get<ServerResponse<Travel>>(`${environment.apiUrl}${id}/stopschedule`);
}

然后在你的组件中：

this.getData = this.travelService.get(this.id)
    .subscribe(
      result => this.data = result.resource,
      () =>  this.erro = true
    );

嵌套JSON数据的角度创建模型

4 个答案: