How to pass an Object Model (that has an Array of Objects Models in it) to API for insert as Params

Question

i am new to angular, trying to make parameters of my object Model, whenever i stringify my object it makes a large string that API does not accept. What should i do..?

here is the object that i want to convert to parameters.

{
    "qaevaluationid": 1,
    "agentid": 1,
    "callerid": "1234",
    "calledon": "02/13/2020 10:38:14 AM",
    "duration": "304",
    "overallfeedback": "adasdasd",
    "isfatal": false,
    "fatalcallreasonid": "3",
    "evaluationtypeid": "1",
    "callratings": [{
        "callratingid": 1,
        "createdby": 1,
        "createdbyname": "john",
        "createdon": null,
        "evaluationfactorid": 8,
        "is_deleted": "F",
        "modifiedby": -1,
        "modifiedbyname": "",
        "modifiedon": null,
        "qaevaluationid": 1,
        "rating": "7"
    }, {
        "callratingid": 2,
        "createdby": 1,
        "createdbyname": "john",
        "createdon": null,
        "evaluationfactorid": 9,
        "is_deleted": "F",
        "modifiedby": -1,
        "modifiedbyname": "",
        "modifiedon": null,
        "qaevaluationid": 1,
        "rating": "6"
    }, {
        "callratingid": 3,
        "createdby": 1,
        "createdbyname": "john",
        "createdon": null,
        "evaluationfactorid": 10,
        "is_deleted": "F",
        "modifiedby": -1,
        "modifiedbyname": "",
        "modifiedon": null,
        "qaevaluationid": 1,
        "rating": "8"
    }],
    "createdby": 1,
    "createdbyname": "John",
    "createdon": null,
    "modifiedby": -1,
    "modifiedbyname": null,
    "modifiedon": null,
    "is_deleted": "F"
}

and in TypeScript i am doing like this

this.httpOptions.params = new HttpParams();

this.httpOptions.params = this.httpOptions.params.set('qaEval', JSON.stringify(qaevaluation)); 

return this._httpClient.post<APIResponse<QAEvaluation>>(this.myAppUrl + 'QAEvaluation/insert', { qaEval: qaevaluation }, this.httpOptions)
      .pipe(retry(1), catchError(this.errorHandler));

getting this error

"Http failure response for https://localhost:44304/QAEvaluation/insert?qaEval=%7B%22qaevaluationid%22:-1,%22agentid%22:1,%22callerid%22:%221234%22,%22calledon%22:%2202/13/2020%2010:38:14%20AM%22,%22duration%22:%22304%22,%22overallfeedback%22:%22adasdasd%22,%22isfatal%22:false ……. This goes on and on : 404 OK"

Answer 1

You are on the correct path, but you are adding all the json object as query parameters, on the URL of your request. In POST requests, you want to put your data in the HTTP Body.

I think if you omit the second line you are good to go. Take also a look at the HttpClient documentation for examples and the correct syntax.

Answer 2

You most probably need to proxy your URLs to your api. Angular uses a specific port to host in your development environment, in your case 44304.

Check: https://angular.io/guide/build

You can use the proxying support in the webpack dev server to divert certain URLs to a backend server, by passing a file to the --proxy-config build option. For example, to divert all calls for http://localhost:4200/api to a server running on http://localhost:3000/api, take the following steps.

Create a file proxy.conf.json in your project's src/ folder.

Add the following content to the new proxy file:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

In the CLI configuration file, angular.json, add the proxyConfig option to the serve target:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

Run by serve

Answer 3

updated my controller to accept FormBody with dynamic object and removed http params from typescript like.. And It Worked.

return this._http.post<APIResponse<QAEvaluation>>(this.myAppUrl + 'QAEvaluation/insert', { qaEval: qaevaluation }, { headers: new HttpHeaders({ 'Content-Type': 'application/json; charset=utf-8' }) })
          .pipe(retry(1), catchError(this.errorHandler));

also used serialization to parse into my resultant object

    public ActionResult Insert([FromBody]dynamic qaEval)
            {            

                    var objModel1 = Newtonsoft.Json.JsonConvert.DeserializeObject(qaEval.ToString());

                    var objModel = Newtonsoft.Json.JsonConvert.SerializeObject(objModel1.qaEval);

    QAEvaluationModel model = Newtonsoft.Json.JsonConvert.DeserializeObject<Models.QAEvaluationModel>(objModel);

qaEvaluationRepository.Add(model);

return Ok(new Models.APIResponse
                    {
                        HasError = false,
                        Message = "Success",
                        Content = null
                    });
    }