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, Apr 13 '17 at 15:16
Yes, If I make the same request from Swagger it is successful. I will update my question with extractData() — Thinker, Apr 13 '17 at 15:18
Have you tried `let body = res.json() as ContextModel[];`? Or `let body = res.json()`? — Emin Laletovic, Apr 13 '17 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, Apr 13 '17 at 15:29
Yes, I meant `extractData`, it extracts JSON object from your response, you probably just need to cast that JSON object to `ContextModel[]`. If you want to see if you get the right data from the server, do `console.log(body);` in your `extractData` method. — Emin Laletovic, Apr 13 '17 at 15:32
Okay, no I did GET in my swagger API and there I can already see that data is not saved properly i.e. the response as I have shown. extractData() works correctly I suppose — Thinker, Apr 13 '17 at 15:35
Ok, I might have misunderstood your problem. Is the problem that you are not getting the input data correctly on the server side or that you don't get the correct response from the server to the client? — Emin Laletovic, Apr 13 '17 at 15:41
Yes the first case, POST request do not post data correctly, role, eng_reason etc everything is being sent as null although in console.log I see it. — Thinker, Apr 13 '17 at 15:45
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, Apr 13 '17 at 15:47
I tried that, but then POST fails saying media type not supported — Thinker, Apr 13 '17 at 15:50
without JSON.stringify() if I send {context} instaed of {body}, it's still the same — Thinker, Apr 13 '17 at 16:00
What if you just send `context` instead of `{context}`? `this.http.post(this.base_url + 'Context', context , options)` — StriplingWarrior, Apr 13 '17 at 16:12
Good to hear. I added an answer that you can accept so people know that you don't need help anymore. — StriplingWarrior, Apr 13 '17 at 17:22

score 1 · Accepted Answer · answered Apr 13 '17 at 17:22

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 Answers1

Linked