Zomato API not working - ReactJs

Question

I'm having a hard time trying to make a basic zomato api request work, in reactjs.

The api documentation looks so simple. I'm doing a basic GET request to categories: https://developers.zomato.com/documentation#!/common/categories

And here's how my ReactJS function looks like:

  componentDidMount() {
   // A previous request for london restaurants 
  //  axios.get('https://developers.zomato.com/api/v2.1/geocode? 
 lat=51.5138&lon=0.0984')

 axios.get('https://developers.zomato.com/api/v2.1/categories')
  .then(res => {
    console.log(res.data);
    this.setState(
      { places: res.data});
  });
 }

However, I keep getting this response when I hit any api url, in the browser. Or via insomnia.

{
"code": 403,
"status": "Forbidden",
"message": "Invalid API Key"
}

I know it says invalid API. But I've gotten these URLs after loggin in and applying any API key in Zomato's developer portal. Can't find any intructions to figure where I've gone wrong...

Thanks, Reena.

score 4 · Answer 1 · answered Apr 09 '18 at 13:21

i got it, the answer was this:

const config = { headers: {'user-key': 'MY KEY HERE'} }; 
enter code here
axios.get('developers.zomato.com/api/v2.1/…;, config) .then(res => { 
console.log(res.data.collections); this.setState( { places: 
res.data.collections }); });

thank you all.

score 1 · Answer 2 · answered Oct 13 '19 at 11:20

Pass the API_Key from Headers you'll get the response data.

axios({
      method: "GET",
      url: "https://developers.zomato.com/api/v2.1/search",
      headers: {
        "user-key": "b8cc3b8b0a85afed047f030fb52dc15f",
        "content-type": "application/json"
      }
    })
      .then(response => {
        console.log(response.data.restaurants[0].restaurant.name);
      })
      .catch(error => {
        console.log(error);
      });

score 0 · Answer 3 · answered Apr 07 '18 at 22:40

0

You need to set this key this in the request header.

X-Zomato-API-Key:

Sample request:

curl -X GET --header "Accept: application/json" --header "X-Zomato-API-Key: <YOUR_API_KEY>" "https://developers.zomato.com/api/v2.1/categories"

Hope this will help you.

answered Apr 07 '18 at 22:40

shivamsupr

470
1
6
16

ok, but who would i write this using axios? i dont think im using curl in this project... – Reena Verma Apr 08 '18 at 15:09
In your axios request just set "X-Zomato-API-Key:" in the headers. – shivamsupr Apr 09 '18 at 12:00
i got it, the answer was this: const config = { headers: {'user-key': 'MY KEY HERE'} }; axios.get('https://developers.zomato.com/api/v2.1/collections?lat=51.5148&lon=0.0651&count=10', config) .then(res => { console.log(res.data.collections); this.setState( { places: res.data.collections }); }); thank you all. – Reena Verma Apr 09 '18 at 13:20

score 0 · Answer 4 · answered Apr 07 '18 at 22:42

0

Seems you are missing user-key parameter and its value. For example, the URL should be something like:

https://developers.zomato.com/api/v2.1/categories?user-key=<your API key>

answered Apr 07 '18 at 22:42

vips

342
1
4
19

Zomato API not working - ReactJs

4 Answers4