How to setup Angular REST api with ClientHttp for JSON object from form inputs?

Question

I'm struggling with the .post payload and getting a 400 error that "The request contains no valid record sets." I want to post to a Postgres DB. Here is my payload that is being sent to the server. It is a string in JSON format. It is being rejected. I'm a noob to REST and learning JS, Angular, etc.

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

The URL is setup as the DreamFactory middleware recommends in their API Docs, in this case with the error message in the console:

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

DreamFactory middleware provides examples for Angular 2 but they were mostly written during the RC stage of Angular development and outdated. Also, the code doesn't follow the Style Guide.

I've succeeded with .get. This code works fine and populates Angular Material2 DataTable with data I manually entered into the db.

GET in the component:

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;
      });
  }

GET in the service:

 constructor(
    private http: HttpClient,
  ) { }


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

The issue is the payload for a .post. I've used this code as a base and tried a variety of Observable operators and HttpClient suggestions from various sources but nothing has added a member to the db. I'm clearly on the wrong track but where? The data package from this code is listed in the beginning of this post.

POST in the service:

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

POST in the component:

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

Answer 1

I needed to put the data in an array format with JSON.parse. The json string wasn't accepted. I also had a couple of other db setup problems to fix. I can't forget that Postgres likes snake case, first_name, and not camel case, firstName. However, I don't think this code is as concise as it should be. It looks like a hack. I'm very open to other suggestions!

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();
  }