Home / Questions / 137093
Accepted
H. Díaz
Asked: 2020-02-09 04:13:58 +0800 CST 2020-02-09 04:13:58 +0800 CST

Update nested data from Angular

  • 772

How do I update this data?:

Angle 5:

export class Cualquiera{
    constructor(
        private title: string,
        private datos: [{
            title: string,
            description: string
        }]
    ){}
}

I have the backend made with nodejs. The thing is that when trying to update from an Angular form, the record is created, but not the data. I use postman as a REST application, and there I see how it generates a new record for data, but it only creates its id and does not receive the data entered.

<form #pdForm="ngForm" (ngSubmit)="onSubmit()">
    <input type="text" name="title" #title="ngModel" [(ngModel)]="cualquiera.datos.title"><br />
    <input type="text" name="description" #description="ngModel" [(ngModel)]="cualquiera.datos.description">
    <button type="submit">Actualizar</button>
</form>

I've gone a thousand times, but I haven't achieved anything, I really thought this was going to be less complicated, but I don't know what I'm missing.

Cualquiera.findByIdAndUpdate(id,
        {$push: {datos: {title: update.title, description: update.description}}}, 
        (err, cualuqieraUpdated) => {
            if (err) { return res.send({message: err});}
            return res.send({message: 'Cualquiera actualizado.', cualquiera: cualquieraUpdated, update: update});
        }
    );

that is controller method in nodejs. The truth is, I've done this more times, but now after having tried several ways I don't know what I'm doing wrong. All the best.

EDITED:

Here is the service that makes the request to the back-end:

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

.....

submitDatos(id: string, cualquiera : Cualquiera): Observable<Cualquiera>{
      return this._http.put<Cualquiera>(this.url + 'updateDatos/' + id, cualquiera, httpOptions).pipe(
        tap(tap(cv => this.log(`Datos actuaizados: id=${id}`)))
      );
    }

Backend path:

router.put('/updateDatos/:id', cualquieraController.updateDatos);

And here is the submit from the component:

onSubmitDatos(){
   const id = this._route.snapshot.paramMap.get('id');
   this._cualquieraService.submitDatos(id, this.cualquiera).subscribe(
     response => {
      // console.log(response);
     },
     error => {
       console.log(error);
     }
   );
}
angular4

1 Answers

  1. Best Answer

    Make sure that before making the request to the service, the object you send is well formed, thus ensuring that the problem is not in the angular form. Simply make a console.logof the object just before the request

    return this._http.put<Cualquiera>(this.url + 'updateDatos/' + id, cualquiera, httpOptions).pipe(
        tap(tap(cv => this.log(`Datos actuaizados: id=${id}`)))
      );

    Try creating a json object by embedding the object cualquiera:

    let cualquieraSend= {
   'cualquiera':cualquiera
};

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

return this._http.put<Cualquiera>(this.url + 'updateDatos/' + id, cualquieraSend, httpOptions).pipe(
        tap(tap(cv => this.log(`Datos actuaizados: id=${id}`)))
      );

    And from the backend in the method that receives the request, retrieve the object from req.bodyand pass it directly to thefindByIdAndUpdate 

    let cualquieraObj=req.body.cualquiera;

Cualquiera.findByIdAndUpdate(id,establecimiento,(err, cualuqieraUpdated) => {
            if (err) { return res.send({message: err});}
            return res.send({message: 'Cualquiera actualizado.', cualquiera: cualquieraUpdated, update: cualquieraObj});
        }
    );

    This is how it should work for you, you tell me what it is.

    • 1