How to send nested JSON input data to API in Angular 11

Question

I need to send nested JSON data to my API. It's my first time to do this, and I don't have any idea how to do that in Angular. This is the nested JSON data that I need to send

JSON

{
  "message": "string",
  "data": {
    "startDate": "2022-01-01",
    "endDate": "2022-01-04",
    "tableName": "ms_product_aud",
    "columnName": "height",
    "remarks": "100"
  }
}

Please help me :)

Answer 1

I finally know how to do that. Here's how I'm doing it. First I make the data model

Data Model

export class ActivityLogDataSend {
    startDate: string = "";
    endDate: string = "";
    tableName: string = "";
    columnName: string = "";
    remarks: string = "";
}

Then I make the FormGroup and FormControl to input the data

Code

this.activityLogForm = this.formBuilder.group({
      startDate: new FormControl({
        value: this.data.startDate ? "" : this.data.startDate,
        disabled: this.mode === EditMode.view || this.mode === EditMode.edit
      }, [Validators.required]),
      endDate: new FormControl({
        value: this.data.endDate ? "" : this.data.endDate,
        disabled: this.mode === EditMode.view || this.mode === EditMode.edit
      }, [Validators.required]),
      tableName: new FormControl({
        value: this.data.tableName ? "" : this.data.tableName,
        disabled: this.mode === EditMode.view || this.mode === EditMode.edit
      }, [Validators.required]),
      columnName: new FormControl({
        value: this.data.columnName ? "" : this.data.columnName,
        disabled: this.mode === EditMode.view || this.mode === EditMode.edit
      }, [Validators.required]),
      remarks: new FormControl({
        value: this.data.remarks ? "" : this.data.remarks,
        disabled: this.mode === EditMode.view || this.mode === EditMode.edit
      }, [Validators.required]),
    });

After that I just make some simple button using Angular material, and create class to call the API and get the data.

Call API

getData(event): void {
    const sb = this.activityLogSvc.getData(this.activityLogForm.getRawValue()).subscribe((result) => {
      this.displayedData = result;
      console.log(JSON.parse(result.syncData), 'JINX');
    });
    this.subscriptions.push(sb);
  }

And that's how to insert data to API using Angular 11.