Create and Update JSON calls not working

Question

I am learning Angular 2 and have an interesting issue. I am using json-server to mock my service calls and retrieve works well. However I have issues with Create and Update.

I am using a basic model called notification which looks like so:-

export class NotificationModel {
constructor(
    public id: number,
    public name: string,
    public description: string
){}

}

and here's my basic functions nothing too strange here!

createNotification(notification : NotificationModel) {  
    return this._http.post('http://{myurl}/notifications', JSON.stringify(notification))
        .map(res => res.json());
}

updateNotification(notification : NotificationModel) {
    return this._http.put('http://{myurl}/notifications/' + notification.id, JSON.stringify(notification))
        .map(res => res.json());
}

When I try to pass in simple test values I instead get the following:-

The create generates a 9 character alphanumeric value for id and nothing in the other fields. Here's my object:-

{"id":5,"name":"NEW NOTIFICATION","description":"NEW NOTIFICATION DESCRIPTION"}

UPDATE:- Here's what it creates

{
  "id": "rkxCLjZLx"
}

The update blanks out the other two fields and just keeps the id field. Here's my object

{"id":"3","name":"Notification 3","description":"UPDATE DESCRIPTION"}

UPDATE:- Here's the record after update

{
  "id": "3"
}

Is this a json-server issue or is there something obvious that I'm doing wrong?

UPDATE

Here's the functions I use to call my service

addNotification(notification : NotificationModel) {
    this._notificationService.createNotification(new NotificationModel(5,
                                    'NEW NOTIFICATION', 'NEW NOTIFICATION DESCRIPTION')).subscribe(
         data => {
           // refresh the list
           this._notificationService.getNotifications().subscribe(res => {
                    this.notifications = res;
                }
            );
           return true;
         },
         error => {
           console.error("Error adding notification!");
           return Observable.throw(error);
         }
      );
}

updateNotification(notification : NotificationModel) {

    notification.description = 'UPDATE DESCRIPTION';

    this._notificationService.updateNotification(notification).subscribe(
         data => {
           // refresh the list
           this._notificationService.getNotifications().subscribe(res => {
                    this.notifications = res;
                }
            );
           return true;
         },
         error => {
           console.error("Error updating notification!");
           return Observable.throw(error);
         }
      );
}

Can you post the code where you create the new notifications? Also can you clarify the test values, I'm confused as to what is the expected vs actual. — shusson, Jan 10 '17 at 00:07
what does the network tab in your browser's developer tools show for the http requests? — shusson, Jan 10 '17 at 00:27

score 0 · Accepted Answer · answered Jan 10 '17 at 02:21

Found my issue!

I wasn't setting the content type anywhere! By updating my PUT and POST requests like so it now works as expected.

createNotification(notification : NotificationModel) {

    let body = JSON.stringify(notification);
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });         

    return this._http.post(this.serviceURL, body, options)
        .map(res => res.json());
}

updateNotification(notification : NotificationModel) {

    let body = JSON.stringify(notification);
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers }); 

    return this._http.put(this.serviceURL + '/' + notification.id, body, options)
        .map(res => res.json());
}

Create and Update JSON calls not working

1 Answers1