Back-end doesn't recognize the json body Angular

0
votes

My Angular (front-end) is making a POST request with JSON body and sends it to the server as follows :

const reponse = {
      "Id_Harry" : this.harry.getId,
      "x_harry" : this.harry.getX(),
      "y_harry" : this.harry.getY(),
      "Pv_Harry" : this.harry.getPv(),
     "Force_Harry" : this.harry.getForce()
  };

fetch(url, {
method: 'POST',
body: JSON.stringify(reponse),
headers :{
    "Content-Type" : "application/json ,charset=UTF-8"
  }
}).then((resp) => resp.json()).then(function(response) {
    console.info('fetch()', response);
    return response;
});

The back-end doesn't seem to recognize the server json body.The back-end code is a post that updates all the database with the values given by the json body. The backend code is :

   [Route("api/Harry/update")]
        [HttpPost]
        public IHttpActionResult PostHarry([FromBody] HarryViewModel harry)
        {
            try
            {
                if (harry == null)
                {
                    return NotFound();
                }

                HarryDTO ha = new HarryDTO();

                ha.Id_Harry = harry.Id_Harry;
                ha.Pv_Harry = harry.Pv_Harry;
                ha.Force_Harry = harry.Force_Harry;
                ha.x_harry = harry.x_harry;
                ha.y_harry = harry.y_harry;


                _harryService.UpdateHarry(ha);

                return Content(HttpStatusCode.OK,"OK");

            }
            catch (Exception ex)
            {
                return Content(HttpStatusCode.InternalServerError, "Something happenes!");

            }
        }

HarryViewModel class is : 

 public class HarryViewModel
    {
        public int Id_Harry { get; set; }
        public int Pv_Harry { get; set; }
        public int Force_Harry { get; set; }
        public int x_harry { get; set; }
        public int y_harry { get; set; }
    }

The back-end doesn't seem to recognize the Angular json format. I get this error : 415 Unsupported Media Type. "no mediatypeformatter is available to read an object of type 'harryviewmodel' from content with media type 'application/octet-stream'."

Take a better look at the ERROR :

error picture

Thank you so much for your attention.

2
c#jsonangularresthttp
You are getting http error 415. Unsupported Media Type. You request error has a type which the server does not support. You need to get the documentation for the server you are connecting to and find out what a typical request should look like. - jdweng
I supposed that problem is with header. Did you have in your header for content type Content-Type: application/json? - Ilija Iličić
@IlijaIličić yes I modified it - Lefter Vogli
@Turo yes I had it, I modified it and still doesn't work - Lefter Vogli
the content-type separator is ';' maybe thats all.. - Turo

2 Answers

0
votes

You are not passing response to the api.

const reponse = {
      "Id_Harry" : this.harry.getId,
      "x_harry" : this.harry.getX(),
      "y_harry" : this.harry.getY(),
      "Pv_Harry" : this.harry.getPv(),
     "Force_Harry" : this.harry.getForce()
  };
// Instead of this.checkResponse,  pass "response" which is your post data.**
  this.http.post(url, response).toPromise().then((data:any) => {
    console.log(data);
    console.log(data.json.test);
    this.json = JSON.stringify(data.json);
  });

And if API is not recognizing post data type, then pass on proper content type header to your post request like this:-

const reponse = {
      "Id_Harry" : this.harry.getId,
      "x_harry" : this.harry.getX(),
      "y_harry" : this.harry.getY(),
      "Pv_Harry" : this.harry.getPv(),
     "Force_Harry" : this.harry.getForce()
  };

  const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json'
  })
  };

  this.http.post(url, response, httpOptions).toPromise().then((data:any) => {
    console.log(data);
    console.log(data.json.test);
    this.json = JSON.stringify(data.json);
  });

You can read more about HttpClient options here

0
votes

I have checked your code:

Here's what you need to do : 

import { HttpHeaders } from '@angular/common/http';

const response = {
    "Id_Harry" : this.harry.getId,
    "x_harry" : this.harry.getX(),
    "y_harry" : this.harry.getY(),
    "Pv_Harry" : this.harry.getPv(),
    "Force_Harry" : this.harry.getForce()
};
const headers = new HttpHeaders();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
this.http.post(url, response, { headers: headers }).toPromise().then((data:any) => {
  console.log(data);
  console.log(data.json.test);
  this.json = JSON.stringify(data.json);
});