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"

Is there any server that run on your localhost:44304/... that can get this string and return results?, it's seems to me that there is not. and also it's better to send uniqe id of an object and not full long string like that — Lagistos, Feb 19 '20 at 06:11
no i am not running any other server on localhost that can return results by large string. and how can i send unique id of object and then convert it to results at Api End.? — Rehman, Feb 19 '20 at 06:25

score 0 · Accepted Answer · answered Feb 19 '20 at 06:17

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.

score 0 · Answer 2 · answered Feb 19 '20 at 06:23

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

score 0 · Answer 3 · answered Feb 19 '20 at 11:03

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
                    });
    }

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

3 Answers3