HTTP POST request failed with response as null values in angular 2 using typescript

Question

I am working on Angular 2 technology, in one of my current project I was faced the issue in HTTTP POST request using typescript code.

This is the code I wrote in myservice.ts

 postVehicleInfoRestful(vehicleInfo: VehicleInfoTable): Observable<VehicleInfoTable> {

    console.log('VehicleInfo Service.')

    //let body = JSON.stringify(vehicleInfo ? vehicleInfo  : null);
    let body = JSON.stringify(vehicleInfo);
    console.log(body);

    let headers = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    }); //'application/x-www-form-urlencoded' application/json


    let options = new RequestOptions({ headers: headers });//, method: "post"

    console.log(this._settingsService.todoListAPIUrl + '/api/VehicleInfoTable');

    return this._http.post(this._settingsService.todoListAPIUrl + '/api/VehicleInfoTable', body, options)
        .map(res => res.json())
        .do(data => console.log(JSON.stringify(data)))
        .catch(this.handleError);
}

And also, wrote the code in mycomponenet.ts

ngOnInit(): void {

    console.log(' VehicleInfoComponent In OnInit');

    this.vehicleInfo.ID = 7;
    this.vehicleInfo.AssetType = 'Auto';
    this.vehicleInfo.IntendedUse = 'Personal';
    this.vehicleInfo.NeworUsed = 'New';
    this.vehicleInfo.SSN = '123456789';
    this.vehicleInfo.VehicleYear = '1';
    this.vehicleInfo.VehicleMake = '2';
    this.vehicleInfo.VehicleModel = '3';
    this.vehicleInfo.VIN = 'US123';
    this.vehicleInfo.CurrentMileage = '40';             
}

 saveVehicleInfo() {

    console.log('Save Vehicle Info Details.');
    console.log(this.vehicleInfo);

    this._vehicleInfoService.postVehicleInfoRestful(this.vehicleInfo).subscribe(//call the post
        data => this.postVehicleInfoToServer = JSON.stringify(data),// put the data returned from the server in our variable
        error => console.log("Error HTTP Post Service"),// in case of failure show this message
        () => console.log("Job Done Post !"));  //run this code in all cases   

}

This is the code I wrote in mycontroller.cs

 public async Task Post(VehicleInfoTable vehicleInfo)
    {
        try
        {
            //owner = ((ClaimsIdentity)User.Identity).FindFirst(ClaimTypes.NameIdentifier).Value;

            using (var client = NewDataAPIClient())
            {
                await client.VehicleInfoTables.PostVehicleInfoTableByVehicleinfotableAsync(new VehicleInfoTable
                {

                    ID = (int)vehicleInfo.ID,
                    AssetType = vehicleInfo.AssetType,
                    IntendedUse = vehicleInfo.IntendedUse,
                    NeworUsed = vehicleInfo.NeworUsed,
                    SSN = vehicleInfo.SSN,
                    VehicleYear = vehicleInfo.VehicleYear,
                    VehicleMake = vehicleInfo.VehicleMake,
                    VehicleModel = vehicleInfo.VehicleModel,
                    VIN = vehicleInfo.VIN,
                    CurrentMileage = vehicleInfo.CurrentMileage
                });
            }
            System.Diagnostics.Trace.TraceInformation("VehicleInfoTableController in ToDoListAPI");
            DevInsights.TrackEvent("VehicleInfoTableController in ToDoListAPI", "Post");

        }
        catch (Exception ex)
        {
            DevInsights.TrackException(ex, "VehicleInfoTableController in ToDoListAPI", "Post");
            System.Diagnostics.Trace.TraceWarning(ex.Message);
        }
    }

when I debug my code, once click on save button, based on my post url this method will fired public async Task Post(VehicleInfoTable vehicleInfo) { ...... } but in that vehicleInfo parameter contains all fields value will be null but when I make post request I added the data in the body.

Can you please tell me where I did mistake for adding the data to body in http post request.

Can you please tell me where I did mistake and how can I resolve this issue?

-Pradeep

When the post request fails, what is the error you receive?

R. Richards
– R. Richards

2017-01-06 12:36:12 +00:00
Commented Jan 6, 2017 at 12:36 — R. Richards
– R. Richards, Commented Jan 6, 2017 at 12:36
Thanks, can you please see my updated question once.

Pradeep
– Pradeep

2017-01-06 12:47:25 +00:00
Commented Jan 6, 2017 at 12:47 — Pradeep
– Pradeep, Commented Jan 6, 2017 at 12:47

AVJT82 · Accepted Answer · 2017-01-09 05:25:44Z

2

EDIT I could suggest two options for you to try, either:

Try this, make it as simple as possible first, then try to add more moving parts ;)

postVehicleInfoRestful(vehicleInfo: VehicleInfoTable) {
    let body = JSON.stringify(vehicleInfo);
    let headers = new Headers({
    'Content-Type': 'application/json'}); 
    let options = new RequestOptions({ headers: headers });
    return this._http.post(this._settingsService.todoListAPIUrl + '/api/VehicleInfoTable', body, options)
      .map((res: Response) => { console.log('res', res); }) // let's see what we get
}

or:

postVehicleInfoRestful(vehicleInfo: VehicleInfoTable) {
    let body = new URLSearchParams();
    // mark all your properties and values below with body.set
    body.set('yourPropertyName1', vehicleInfo.property1)
    body.set('yourPropertyName2', vehicleInfo.property2)
    let headers = new Headers({
    'Content-Type': 'application/x-www-form-urlencoded'}); 
    let options = new RequestOptions({ headers: headers });
    return this._http.post(this._settingsService.todoListAPIUrl + '/api/VehicleInfoTable', body.toString(), options)
      .map((res: Response) => { console.log('res', res); }) // let's see what we get
}

edited Jan 9, 2017 at 5:25

answered Jan 6, 2017 at 14:27

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

2 Comments

Pradeep Over a year ago

Thanks, I updated my code with above lines but it won't works ,it gives exception like "OPTIONS localhost:46439/api/VehicleInfoTable 405 (Method Not Allowed)", XMLHttpRequest cannot load localhost:46439/api/VehicleInfoTable. Response for preflight has invalid HTTP status code 405.

AVJT82 Over a year ago

Updated my answer, try the second one... no idea if that would work, but you can try :)

Phil Cap · Accepted Answer · 2017-01-06 12:38:43Z

0

Calling map(res => console.log(res.json())) on the Observable in myservice.ts is mapping the result to type void. Correct to map(res => res.json()) instead. The RXJS Observable do(...) method is designed exactly for this purpose, as it does not affect the Observable's contents.

answered Jan 6, 2017 at 12:38

Phil Cap

2092 silver badges10 bronze badges

5 Comments

Pradeep Over a year ago

Thanks, I updated my code with what you said above, but still also facing the same issue as it's return null value.

Phil Cap Over a year ago

Did you inspect the server's response externally to ensure the response's body content is not null?

Pradeep Over a year ago

Thanks , can you please see my updated question once.

Phil Cap Over a year ago

I doubt this error is on the Angular side. If you have corrected the map(...) issue then Angular will simply return the HTTP post response body as an object. Since there is no error, it is most likely that your controller is returning an empty response body.

Pradeep Over a year ago

Thanks, I corrected the map(....) issue but once post request fired my controller method in that vehicleinfo contains null value. I don't know how it be null even I supplied the data in http post request.

Collectives™ on Stack Overflow

HTTP POST request failed with response as null values in angular 2 using typescript

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related