Ravenous (Part 4): Getting Error While Trying to Search Restaurant

Hi,

I have just finished Ravenous (Part 4) project.
https://www.codecademy.com/paths/build-web-apps-with-react/tracks/bwa-ajax-requests-and-api-interactions/modules/bwa-ravenous-part-four/projects/interacting-with-yelp-api

I am facing an issue while trying to search restaurant. I type “mexican” in the “Search Business” field and “seattle” in the “Where?” field. Then I click on “Let’s Go” button. Now, I get this error.

Here are my codes in Yelp.js:

import Business from "../components/Business/Business";

const apiKey = 'api-key-goes-here';

const Yelp = {};

const search = (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){
            return jsonResponse.businesses.map(business => ({
                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[0].title,
                rating: business.rating,
                reviewCount: business.review_count
            }));
        }
    });
};

export default Yelp;

Here are my codes in SearchBar.js:

import React from 'react';
import './SearchBar.css';
// import BusinessList from "../BusinessList/BusinessList"; //importing BusinessList.js


class SearchBar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            term: '',
            location: '',
            sortBy: 'best_match'
        };
        this.handleTermChange = this.handleTermChange.bind(this);
        this.handleLocationChange = this.handleLocationChange.bind(this);
        this.handleSearch = this.handleSearch.bind(this);
        this.sortByOptions = {
            'Best Match': 'best_match',
            'Highest Rated': 'rating',
            'Most Reviewed': 'review_count'
        };
    }

    getSortByClass(sortByOption){
        return this.state.sortBy === sortByOption ? 'active' : '';
    }

    handleSortByChange(sortByOption){
        this.setState({ sortBy: sortByOption });
    }

    handleTermChange(event){
        this.setState({ term: event.target.value   });
    }

    handleLocationChange(event){
        this.setState({ location: event.target.value  });
    }

    handleSearch(event){
        this.props.searchYelp(this.state.term,this.state.location,this.state.sortBy);
        event.preventDefault();

    }

    renderSortByOptions() {
        return Object.keys(this.sortByOptions).map(sortByOption => {
            let sortByOptionValue = this.sortByOptions[sortByOption];
            //I think there will be a problem with the comma after 'this.' I thnk it's supposed to be this.sortByOptionValue
            return <li onClick={this.handleSortByChange.bind(this,sortByOptionValue)} className={this.getSortByClass(sortByOptionValue)} key={sortByOptionValue}> {sortByOption} </li>;
        });
    }

    render(){
        return(
            <div className="SearchBar">
                <div className="SearchBar-sort-options">
                    <ul>
                        {this.renderSortByOptions()}
                    </ul>
                </div>
                <div className="SearchBar-fields">
                    <input onChange={this.handleTermChange} placeholder="Search Businesses"/>
                    <input onChange={this.handleLocationChange} placeholder="Where?"/>
                </div>
                <div onClick={this.handleSearch} className="SearchBar-submit">
                    <a>Let's Go</a>
                </div>
            </div>
        );
    }

}

export default SearchBar;

How can I fix the issue?

I’m not an expert, but you need to paste your api key from Yelp in for one thing.
Also, the Yelp object is empty.

Personally, I’m stuck because I’m getting ‘Blocked by CORS’ errors.

1 Like

Ok, so I managed to actually clean up my errors and finish the project.

All I can try and explain to you for this part, even though I’m not good at explaining it in technical terms - search needs to be inside of the Yelp object in order for Yelp.search to make sense.

Here is the example of what my yelp file looks like:

const apiKey = ‘blablabla’;

const Yelp = {search(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) {
return jsonResponse.businesses.map((business) => {
//You can find the key pair stuff in the Yelp json documentation
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[0].title,
rating: business.rating,
reviewCount: business.review_count,
};

    }); 
  }  
}) 

}
};

export default Yelp;

Hi, I’ve just finished this exercise and had a few similar bits to solve.

I found analysing the errors really helpful. Lets look at your first one, it is basically saying that Yelp.search is not defined. If you explore your code in Yelp.js you will see that you have created an empty object called Yelp and a separate function called search.

To make search a method of Yelp you need to write it inside the Yelp object.

If you haven’t already solved it, give that a go.