How to post an object to an array in a json using Angular 6

Question

So I'm testing Angular 6 functionality out for fun to learn it and running a json-server to load a db.json to a localhost server to acquire via service calls which you can see here

{
 "customers": {
 "testingTitle": "Testing Title",
 "trainData":[
 {
  "id": 1,
  "name": "Test Name 1",
  "email": "customer001@email.com",
  "tel": "0526252525"
 },
 {
  "id": 2,
  "name": "Test Name 2",
  "email": "customer002@email.com",
  "tel": "0527252525"
 },
 {
  "id": 3,
  "name": "Customer003",
  "email": "customer003@email.com",
  "tel": "0528252525"
 },
 {
  "id": 4,
  "name": "123",
  "email": "123",
  "tel": "123"
 }
 ]
}

I have a test.service.ts as followed which picks up the service:

import { Injectable } from '@angular/core';
import {HttpClient, HttpResponse, HttpErrorResponse, HttpHeaders, HttpParams} from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import { catchError, map } from 'rxjs/operators';
import 'rxjs/add/observable/throw';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

class Test {
  testingTitle: string;
  trainData:[
    {
      id : number;
      name: string;
      email: string;
      tel: string;
    }
    ];

}

@Injectable({providedIn: 'root'})
export class TestService {

  constructor(private http: HttpClient) {}

  public getAllTests(): Observable{
    const params = new HttpParams().set('_page', "*").set('_limit', "*");
    return this.http.get("http://localhost:3000/customers", {params}).pipe(map(res => res));
  }

  public postTests(object) {
    return this.http.post("http://localhost:3000/customers", object).subscribe(data => {console.log("POST Request is successful ", data);},error => {console.log("Error", error);});
  }
}

I have my test.ts which controls my calls etc.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
import {TestService} from "./test.service";


class Customer {
  id : number;
  name: string;
  email: string;
  tel: string;
}

@Component({
  selector: 'sample-template',
  templateUrl: './test.component.html'})
export class TestComponent implements OnInit {
  testForm: FormGroup;
  testForm2: FormGroup;
  public test: any;
  name: string = '';
  email: string = '';
  tel: string = '';
  public id: any;

  constructor(private httpClient:HttpClient, private fb: FormBuilder, private TestService: TestService) {}




  loadTasks(): void{
    this.TestService.getAllTests().subscribe(response => {this.test = response;
    console.log(this.test)})

  }

  ngOnInit() {

    let trainData = [];

    this.loadTasks();

    this.testForm = this.fb.group({
      testCd: 'Select'
    });

    this.testForm2 = this.fb.group({
      id: this.id,
      name: this.name,
      email: this.email,
      tel: this.tel
    })
  }

  changeDropdown(formControl: FormControl, option: string): void {
    formControl.patchValue(option);
    console.log(option);
  }

  submitForm(){
    let last:any = this.test[this.test.length-1];
    this.id = last.id+1;
    console.log(this.id);
    this.testForm2.value.id = this.id;
    console.log(this.testForm2.value);
    this.TestService.postTests(this.testForm2.value);
  }
}

And my html page which includes the following:

{{test?.testingTitle}}


  Testing
  
  
    {{tests.name}}
  


  
  
    
      
      Name
    
  
  
    
      
      Email
    
  
  
    
      
      Telephone #

My Question is, I'm have everything set up for a post and what I'm trying to do is post testForm2.value to the json but under "trainData":[{}] that's within the JSON. I'm able to do so if I just drop all other objects inside the json and have just the array after "customers":... What exactly am I missing? I'm actually confusing myself right now and I may be overthinking this by alot. The post I have currently in this code works if I have just the array after "customers":.... so instead of me passing object which is the testForm2.value what else do I need to do? I hope this makes sense.

xrobert35 · Accepted Answer

You have some strange things in your code. First :

In you API

return this.http.get("http://localhost:3000/customers", {params}).pipe(map(res => res));

I think what you want to do here is : (the pipe is useless you dont use it and it's not an array)

return this.http.get("http://localhost:3000/customers",{params});

In your component you want to push the update trainData list

submitForm(){
    const lastTrainData = this.test.trainData[this.test.trainData.length-1];

    const newTrainData = this.testForm2.value;
    newTrainData.id = lastTrainData.id + 1;

    this.test.trainData.push(newTrainData);

    this.TestService.postTests(this.test);
  }

How to post an object to an array in a json using Angular 6

Answers (1)

Related Questions