angular 4 post method

Issue

I am new in angular 4 web api. I want to save some data to database using angular 4 web api. When i call a GET method from angular it works fine, but not working on POST method. I am getting 415 Unsupported Media Type. All the time, but when I use postman the post method is work fine because I change the content type to application/json. But in angular it’s not working… I see lots of issues with the same problem, but they don’t work for me. Here I add some hardcoded data.

This is my component ts file:

   fulldetail: Idetails[] =[];
detail: Idetails;
  onClick(value:any) {


       \\hardcoded data
        this.id = 1;
       this.name= abcd;
        this.address= "abcdefgh";
        this.about= "samplestring";
        this.number= 18888;
        this.count = 12.0;

  this._Service.CatchDetail(this.id, this.name, this.address, 
this.about, this.number, this.count)
           .subscribe(detail=> {
                detail.forEach(value => {
                    this.fulldetails.push(value)
           });
        },
            error => {
                console.error(error);
                this.statusMessage = "Problem with the service.Please try again after sometime";

        });

And this is my service .ts code:

CatchDetail(id: number, name: string, address: string, 
about: string, number: number, count: number)
    : Observable<Idetails[]> {
      let data= JSON.stringify([{ id: id, name: name, address: address, about: about, nu: number, count: count }]);
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this._http.post('http://localhost:1234/api/contrllername/' + 'detail', data,
        {
            params: [{ id: id, name: name, address: address, about: about, nu: number, count: count }]
        })
        .map((response: Response) => <Idetails[]>response.json())

}

And this is workdetails.ts (class):

export class Idetails {
constructor(
    public id: number,
    public name: string,
    public address: string,
    public about: string,
    public number: number,
    public count: number
  ) { }
}

This is my controller:

   [HttpPost]
    public void Detail([FromBody] List<spGetDetails_Result> jsonvalues)

    {


        foreach (spGetDetails_ResultDatadetail in jsonvalues)
        {
            spGetDetails_ResultDetailobject = new spGetDetails_Result();

            Detailobject.id = Datadetail.id;
            Detailobject.name= Datadetail.name;
            Detailobject.address= Datadetail.address;
            Detailobject.about= Datadetail.about;
            Detailobject.number= Datadetail.number;
            Detailobject.count = Datadetail.count;

            enqentities.spGetDetails_Result(Datadetail.id, Datadetail.name, Datadetail.address, Datadetail.about, Datadetail.number, Datadetail.count);
        }

    }


    public class spGetDetails
    {

        public int id { get; set; }
        public string name{ get; set; }
        public string address{ get; set; }
        public string about{ get; set; }
        public int number{ get; set; }
        public int count { get; set; }

    }
}

zone.js:2933 POST http://localhost:1234/api/controllername/Detail?id=1&name=abc&address=hj1hgj368&about=dfghjkl&number=31&count=3 415(Unsupported Media Type).
body
:
“{“Message”:”The request entity’s media type ‘text/plain’ is not supported for this resource.”,”ExceptionMessage”:”No MediaTypeFormatter is available to read an object of type ‘List`1’ from content with media type ‘text/plain’………..etc

when I use postman the post method is work fine because I change the content type to application/json. But in angular it’s not working.

Solution

First, you don’t send JSON :

let data= JSON.stringify([{ id: id, name: name, address: address, about: about, nu: number, count: count }]);

The name is pretty explicit : you are creating a string from an object.

Second, you don’t use the header you created. Add this :

return this._http.post('http://localhost:1234/api/contrllername/' + 'detail', data,
  {
    headers: headers,
    params: [{ id: id, name: name, address: address, about: about, nu: number, count: count }]
  }).map((response: Response) => <Idetails[]>response.json())

Answered By – user4676340

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.