Angular http request with body and headers

Question

I am trying to access https://grocerybear.com/#docs sample api request which is shown in the documentation as

curl -H "api-key: 123ABC" \
                     -H "Content-Type: application/json" \
                     -X POST \
                     -d '{"city":"LA", "product":"bread", "num_days": 10}' \
                     https://grocerybear.com/getitems

I used a website online to convert this into a javascript fetch function and got this:

    fetch("https://grocerybear.com/getitems", {
  body: "{\"city\":\"LA\", \"product\":\"bread\", \"num_days\": 10}",
  headers: {
    "Api-Key": "123ABC",
    "Content-Type": "application/json"
  },
  method: "POST"
})

I tested this with javascript with my developer key and it worked, however I want to use the http methods in Angular 9 to get the data.

I tried this:

getData(){

    const options = {
        headers: new HttpHeaders(
        {
          "Api-Key": '(myDeveloper key was inserted here in the program)' as const,
          "Content-Type": 'application/json' as const
        }
        ),
        body: "{\"city\":\"LA\", \"product\":\"bread\", \"num_days\": 10}"
      };

    return this.http.get(`https://grocerybear.com/getitems`, options);
}

and it returned a 400 error when I tried to log it to the page.

When I changed it to a post method request instead of a get method then it also returns a 400 error.

Does anybody know how to implement this to get the proper data back?

Thanks!

Answer 1

I just figured it out!

the correct code would've been:

getData(){
    const body = {city:"LA", product:"bread", num_days: 10}
    const options = {
        headers: new HttpHeaders(
        {
          "Api-Key": 'API KEY inserted here' as const,
          "Content-Type": 'application/json' as const
        }
        )
      };

    return this.http.post('https://grocerybear.com/getitems', body, options);
}

}