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
– Emin Laletovic, Commented Apr 13, 2017 at 15:16
Yes, If I make the same request from Swagger it is successful. I will update my question with extractData() — Thinker
– Thinker, Commented Apr 13, 2017 at 15:18
Have you tried let body = res.json() as ContextModel[];? Or let body = <ContextModel[]>res.json()? — Emin Laletovic
– Emin Laletovic, Commented Apr 13, 2017 at 15:24
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
– Thinker, Commented Apr 13, 2017 at 15:29
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
– Emin Laletovic, Commented Apr 13, 2017 at 15:47

StriplingWarrior · Accepted Answer · 2017-04-13 17:22:02Z

1

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.

answered Apr 13, 2017 at 17:22

StriplingWarrior

158k29 gold badges261 silver badges326 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 http POST body sent as null

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related