Как настроить API-интерфейс Angular REST с ClientHttp для объекта JSON из форм ввода?

Question

Я борюсь с полезной нагрузкой.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":"[e-mail]"}]}

URL-адрес настраивается в соответствии с рекомендациями связующего ПО DreamFactory в их Документах API, в данном случае с сообщением об ошибке в консоли:

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

Промежуточное программное обеспечение DreamFactory предоставляет примеры для Angular 2, но они были написаны в основном на этапе RC разработки Angular и устарели. Кроме того, код не соответствует Руководству по стилю.

Я преуспел с.get. Этот код работает нормально и заполняет таблицу данных Angular Material2 данными, которые я вручную ввел в базу данных.

ПОЛУЧИТЬ в компоненте:

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 из разных источников, но никто не добавил члена в базу данных. Я явно на неправильном пути, но где? Пакет данных из этого кода указан в начале этого поста.

ПОСТ в сервисе:

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

Answer 1

Мне нужно было поместить данные в формате массива с помощью JSON.parse. Строка JSON не была принята. У меня также было несколько других проблем с установкой БД, которые нужно было исправить. Я не могу забыть, что Postgres любит случай змеи, first_name, а не случай верблюда, 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();
  }