Ravenous Part 4

Ravenous Part 4 help: https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/ravenous-part-four/projects/interacting-with-yelp-api

In task 25 and 26 we are to make a call to the Yelp API to return a list of business. I can see that I am successfully making the call and testing inside Yelp.js I can see that the API is returning businesses. But somehow I am not getting that list of businesses in the .then() so that I can update the state variable. How would I test that interchange and see why I am not getting the list of businesses back from the Yelp module like I am expecting? What I am getting is that the value of businesses from the .then() is undefined. So I suspect I am not getting anything back.

Code from App.js is below:

import React from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
import BusinessList from ‘./components/BusinessList/BusinessList’;
import SearchBar from ‘./components/SearchBar/SearchBar’;
import Yelp from ‘./util/Yelp’;

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
businesses:
};

this.searchYelp = this.searchYelp.bind(this);

}

searchYelp(term, location, sortBy) {
Yelp.searchYelp(term, location, sortBy).then((businesses) => {
console.log(‘inside .then’);
console.log(businesses);
this.setState({businesses: businesses});

});

}

render () {

return (
<div className="App">
  <h1>ravenous</h1>
    <SearchBar searchYelp={this.searchYelp}/>
    <BusinessList businesses={this.state.businesses} />
</div>

);
}
}

export default App;

code from Yelp.js below:

const apiKey = ‘removed api’

var Yelp = {

searchYelp: function(term, location, sortBy) {
return fetch(https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy},
{ headers: {
Authorization: Bearer ${apiKey}
}
})
.then(response => {
return response.json();
})
.then((jsonResponse) => {

    if (jsonResponse.businesses) {
        
        jsonResponse.businesses.map((business) => {
            console.log('yelp call made; returning businesses');
            return {
                id: business.id,
                imageSrc: business.image_url,
                name: business.name,
                address: business.location.address1,
                city: business.location.city,
                state: business.location.state,
                zipCode: business.location.zip_code,
                category: business.categories.alias,
                rating: business.rating,
                reviewCount: business.review_count
            }
        })
    }
});

}

};

export default Yelp;

Your category: property will be ‘undefined’. From the documentation at Yelp.com, the business.categories: value is an array of objects. Each object has a title: and an alias:. You should use the title: instead of alias:, but you have to use an array index as well. Since we don’t know how many objects will be in any given array, we should just use [0] to get the first one. We could write code to determine the length of the array, and then randomly choose one, but that’s beyond the scope of the project. Might be fun to try later. Hope this helps!

1 Like

Hi midlindner,

Thanks for pointing out that error. I am still getting undefined so I am must have another bug somewhere else. I tried to run the Yelp module on its own and I still am getting undefined. It seems like there is nothing being returned from the map function. I tried a couple of different ways to see why this might not be working but to no avail. I am not sure what I am missing here.

const apiKey = removed

var Yelp = {

searchYelp: function(term, location, sortBy) {
return fetch(https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy},
{ headers: {
Authorization: Bearer ${apiKey}
}
})
.then(response => {
return response.json();
})
.then((jsonResponse) => {

    if (jsonResponse.businesses) {
        
        jsonResponse.businesses.map((business) => {
            
            let businessMap = {
                id: business.id,
                imageSrc: business.image_url,
                name: business.name
            };
            
            console.log(businessMap);
           
            return businessMap;
        })
    }
});

}

};

Yelp.searchYelp(‘pizza’, ‘chicago’, ‘best_match’).then(businesses => {
console.log(businesses);
});

1 Like

If you could do me a favor, and edit your post to format your code as code, it will make it much easier to read. For me, it’s easiest to type 3 back tics on the line above code, and 3 more on the line below like so:

```
code here
```
1 Like

Actually, I believe I have found your issue. You are missing a return.

    if (jsonResponse.businesses) {
 //you need a return here      
/* >>*/ return jsonResponse.businesses.map((business) => { 
            console.log('yelp call made; returning businesses');
            return {
                id: business.id,
                imageSrc: business.image_url,
                name: business.name,
                address: business.location.address1,
                city: business.location.city,
                state: business.location.state,
                zipCode: business.location.zip_code,
                category: business.categories.alias,
                rating: business.rating,
                reviewCount: business.review_count
            }
        })
    }
1 Like

Boy you sure did find the missing piece. I have been looking at this code for several days trying to figure out where I got it wrong. Thank you so much for getting me unstuck!!

Also thanks for sharing the coding format for the forum. I will be sure to property format my code going forward.

2 Likes

You’re welcome. Sometimes it takes another pair of eyes to find the missing piece. Congrats on finishing the Ravenous Project. It’s tough. I struggled through it myself. Happy coding!

1 Like