如何使用ClientHttp为表单输入中的JSON对象设置Angular REST api?

时间:2017-11-15 17:21:32

标签: json angular angular-material dreamfactory

我正在努力解决.post有效负载并获得400错误"该请求不包含有效的记录集。"我想发布到Postgres数据库。这是我发送到服务器的有效负载。它是JSON格式的字符串。它被拒绝了。我是REST的一个菜鸟,学习JS,Angular等等。

{"resource":[{"first_name":"John","last_name":"Johnson","main_skill_title":"Application developer - frontend","main_skills":"Angular,JavaScript",,"country":"United States","email":"j@j.com"}]}

网址设置为DreamFactory中间件在其API文档中推荐,在这种情况下,控制台中显示错误消息:

http://localhost:8080/api/v2/pfpsql/_table/members 400 (Bad Request)

DreamFactory中间件为Angular 2提供了示例,但它们大多是在Angular开发的RC阶段编写的,并且过时了。此外,代码不遵循样式指南。

我用.get成功了。此代码工作正常,并使用我手动输入数据库的数据填充Angular Material2 DataTable。

在组件中获取:

constructor(private http: HttpClient) {}

  ngAfterViewInit() {
    this.membersAdminService = new MembersAdminService(this.http);

    // This is for the Material2 DataTable.
    Observable.merge(this.paginator.page)
      .startWith(null)  // Delete this and no data is downloaded.
      .switchMap(() => {
        return this.membersAdminService.getMembers(
          this.paginator.pageIndex);
      })
      .map(data => {
        return data.resource;  // Change from json to array data.
      })
      .subscribe(data => {
        this.dataLength = data.length;
        this.dataSource.data = data;
      });
  }

获得服务:

 constructor(
    private http: HttpClient,
  ) { }


  public getMembers(page: number): Observable<DfApi> {
    return this.http.get<DfApi>(this.baseUrl, {headers: this.headers});
  }

问题是.post的有效负载。我已经使用这个代码作为基础并尝试了各种来源的各种Observable操作符和HttpClient建议,但没有添加成员到db。我明显走错了路,但在哪里?此代码中的数据包列在本文开头。

服务中的POST:

public addMember(memberData) {
    this.http.post(this.baseUrl, memberData, {headers: this.headers})

组件中的POST:

save(addMemberForm) {
    const enteredData = this.addMemberForm.addEditMemberForm.value;
    const memberData = JSON.stringify(enteredData);
    const jsonData = '{"resource": [' + memberData + ']}';
    this.membersAdminService.addMember(jsonData);  
  }

1 个答案:

答案 0 :(得分:0)

我需要使用JSON.parse将数据放入数组格式中。 json字符串未被接受。我还有一些其他数据库设置问题需要解决。我不能忘记Postgres喜欢snake case,first_name,而不是camel case,firstName。但是,我不认为这段代码应该如此简洁。它看起来像一个黑客。我对其他建议非常开放!

save(addMemberForm) {
    const enteredData = this.addMemberForm.addEditMemberForm.value;
      // Result is JS object

    const memberData = JSON.stringify(enteredData);
      // Result is a string instead.

    const jsonData = '{"resource": [' + memberData + ']}';
      // Result is a string in JSON format in DreamFactory required format with {"resource": [

    const jsonArray = JSON.parse(jsonData);
      // Result is an array in JSON format.

    this.membersAdminService.addMember(jsonArray);  // I should be subscribing here, not in the service.
    addMemberForm.addEditMemberForm.reset();
    this.success();
  }