Angular2 http POST body sent as null

Question

For POST request my server expects something like following:

{
  "contextId": 0,
  "role": "Test",
  "eng_reason": "string",
  "aspiration": "string",
  "perception": "string",
  "hobbies": [
    {
      "hobbyId": 0,
      "name": "string",
      "selected": true,
      "contextId": 0
    }
  ],
  "interests": [
    {
      "interestId": 0,
      "name": "string",
      "selected": true,
      "contextId": 0
    }
  ],
  "skills": [
    {
      "skillId": 0,
      "name": "string",
      "selected": true,
      "contextId": 0
    }
  ],
  "connections": [

  ]
}

My service has following function:

  createContext(context: ContextlModel): Observable<ContextlModel[]>{

    let body=JSON.stringify(context)
    console.log(body)

    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this.base_url + 'Context', {body} , options)
    .map(this.extractData)
    .catch(this.handleError);
  }

console.log(body) prints:

{"contextId":0,"role":"Manager","eng_reason":"Manager","aspiration":"Test","perception":"Test","hobbies":[{"hobbyId":0,"name":"Sport","selected":true,"contextId":0},{"hobbyId":0,"name":"Reading","selected":false,"contextId":0},{"hobbyId":0,"name":"Music","selected":false,"contextId":0},{"hobbyId":0,"name":"Travelling","selected":false,"contextId":0},{"hobbyId":0,"name":"Movies","selected":false,"contextId":0},{"hobbyId":0,"name":"Cooking","selected":false,"contextId":0}],"interests":[{"interestId":0,"name":"Robotics","selected":false,"contextId":0},{"interestId":0,"name":"Designs","selected":false,"contextId":0},{"interestId":0,"name":"Web development","selected":false,"contextId":0},{"interestId":0,"name":"Mobile development","selected":false,"contextId":0},{"interestId":0,"name":"Agile","selected":false,"contextId":0},{"interestId":0,"name":"DevOps","selected":false,"contextId":0}],"skills":[{"skillId":0,"name":"Leadership","selected":false,"contextId":0},{"skillId":0,"name":"Adaptability","selected":false,"contextId":0},{"skillId":0,"name":"Communication","selected":false,"contextId":0},{"skillId":0,"name":"Time management","selected":false,"contextId":0},{"skillId":0,"name":"Critical thinking","selected":false,"contextId":0},{"skillId":0,"name":"Negotiating & persuading","selected":false,"contextId":0}],"connections":[]}

However the response I get is as following:

[
  {
    "contextId": 11,
    "role": null,
    "eng_reason": null,
    "aspiration": null,
    "perception": null,
    "hobbies": [],
    "interests": [],
    "skills": [],
    "connections": []
  }
]

Everything is basically null. Why is it so? Why it does not set my body correctly even after JSON.stringify()?

UPDATE:

  private extractData(res: Response) {
    let body = res.json();
    return body || { };
  }

If I copy this console.log(body) and POST it through my Swagger API, it is successful, which means there is some problem in my Angular POST request.

What does the method on your server do with this request? Is it working properly there? Are you sure that result of that method is OK before you return it to the client? And what does extractData method do? — Emin Laletovic
Yes, If I make the same request from Swagger it is successful. I will update my question with extractData() — Thinker
Have you tried let body = res.json() as ContextModel[];? Or let body = <ContextModel[]>res.json()? — Emin Laletovic
If I am not wrong, I guess you mean in extractData()? But the problem is POST itself is not posting data correctly to my backend. — Thinker
Is it possible that brackets around body are not needed? Try this: return this.http.post(this.base_url + 'Context', body , options). Also, you could try it out without JSON.stringify(). — Emin Laletovic

StriplingWarrior StriplingWarrior · Accepted Answer · 2017-04-13T17:22:02

You're making this more complicated than it needs to be. Angular will take care of turning your object into JSON before sending it. You just need to provide the object you want to send:

  createContext(context: ContextlModel): Observable<ContextlModel[]>{
    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this.base_url + 'Context', context, options)
    .map(this.extractData)
    .catch(this.handleError);
  }

PS--I often find it useful to use Chrome's Dev Tools Network tab to the exact contents of the POST from the browser's perspective. It helps me in debugging problems like this.

Angular2 http POST body sent as null

1 Answers