Http request to parse server using Angular HttpClient

Question

I was trying to use parse server’s REST API so in it’s documentation, they wrote : To create a new object on Parse, send a POST request to the class URL containing the contents of the object. For example, to create the object described above:

curl -X POST \
-H "X-Parse-Application-Id: ${APPLICATION_ID}" \
-H "X-Parse-REST-API-Key: ${REST_API_KEY}" \
-H "Content-Type: application/json" \
-d '{"score":1337,"playerName":"Sean Plott","cheatMode":false}' \
https://YOUR.PARSE-SERVER.HERE/parse/classes/GameScore

I tested it and it worked correctly so I want to use this method by angular HttpClient, then I wrote this code :

let url = 'https://parseapi.back4app.com/classes/test';
const httpOptions = {
headers: new HttpHeaders({

  'X-Parse-Application-Id': '6mK3kDvzuLeyJojS9yRGYr6JxmuDtapGhwmUflqy',
  'X-Parse-REST-API-Key': '########################################',
  'Content-Type':  'application/json'
 })
 };
    let params = new HttpParams();
    params = params.set('score', '1337');
    params = params.append('playername', 'mohy');
    this.httpClient.post(url,params,httpOptions).subscribe(data =>{
      console.log(data);

    },err => {
      alert(err.message);
    });

}

when I used curl, it worked correctly but if I use HttpClient I get this error: Http failure response for https://parseapi.back4app.com/classes/test: 400 Bad Request

how can I fix this?

HttpParams is intended for URL query parameters, not the request body; what request do you actually end up sending? — jonrsharpe
– jonrsharpe, Commented Jul 23, 2018 at 18:20
It might work this way; params = params.set('score', '1337').set('playername', 'mohy'); — rickz
– rickz, Commented Jul 23, 2018 at 20:35

Muhammed Albarmavi · Accepted Answer · 2018-07-23 19:18:54Z

3

HttpParams object serialize to an encoded string URL-query-string (?score=1337&playername=mohy) format,and this not valid json format as mention by content-type.

let url = 'https://parseapi.back4app.com/classes/test';
const httpOptions = {
 headers: new HttpHeaders({
   'X-Parse-Application-Id': '6mK3kDvzuLeyJojS9yRGYr6JxmuDtapGhwmUflqy',
   'X-Parse-REST-API-Key': '########################################',
   'Content-Type':  'application/json'
  })
 };

let body = {
  score: '1337',
  playername: 'mohy'
 }

this.httpClient.post(url,JSON.stringify(body),httpOptions).subscribe(data =>{
   console.log(data);
 },err => {
      alert(err.message);
 });
}

if you want to use get method and pass the parameter as URL-query-string

 let params = new HttpParams();
    params = params.set('score', '1337');
    params = params.append('playername', 'mohy');

    this.httpClient.get(url,{params},httpOptions).subscribe(data =>{
      console.log(data);
    },err => {
      alert(err.message);
    });

edited Jul 23, 2018 at 19:18

answered Jul 23, 2018 at 18:26

Muhammed Albarmavi

24.6k9 gold badges72 silver badges92 bronze badges

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

3 Comments

jonrsharpe Over a year ago

1. It's helpful to explain what you've changed and why; and 2. You don't need to stringify the body yourself.

Mohy Fahim Over a year ago

yes, please give us some explanation about what exactly do here, and if I want to use -- data-urlencode, What needs to be changed?

Muhammed Albarmavi Over a year ago

I have update the answer,hope I help here @MohyFahim

Collectives™ on Stack Overflow

Http request to parse server using Angular HttpClient

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related