Angular2 http POST正文发送为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.

Answer 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.