Ravenous Part 4

You must select a tag to post in this category. Please find the tag relating to the section of the course you are on

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile:

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

Can someone help me out here. I went through all the material and can’t find my way out. I also noticed that some people had the same error message with different solutions.
Here is what I’ve got when I click on “let’s go”:

const apiKey =
  "iOPq5Jk8kxmorHg3vjIpGm5hvs5Pws2sN4xL4ECCaVYfwZaxwtg-ldlMw7JYzXHUufgqDOTjbdIMCW3cKBTkgmgarw2Iu2EJ1vIOcy-vV__J4hiVMAxPAJ_ZMD0NXnYx";

const Yelp = {
  searchYelp(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 => {
            console.log(business);
            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;

SearchBar

import React from "react";
import "./SearchBar.css";

const sortByOptions = {
  "Best Match": "best_match",
  "Highest Rated": "rating",
  "Most Reviewed": "review_count"
};

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);
  }
  handleSearch(event) {
    this.props.searchYelp(
      this.state.term,
      this.state.location,
      this.state.sortBy
    );
    event.preventDefault();
  }

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

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

  getSortByClass(sortByOption) {
    if (sortByOption === this.state.sortBy) {
      return "active";
    }
    return "";
  }

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

  renderSortByOptions() {
    return Object.keys(sortByOptions).map(sortByOptions => {
      let sortByOptionValue = sortByOptions[sortByOptions];
      return (
        <li
          key={sortByOptionValue}
          onClick={this.handleSortByChange.bind(this, sortByOptionValue)}
          className={this.getSortByClass(sortByOptionValue)}
        >
          {sortByOptions}
        </li>
      );
    });
  }
  render() {
    return (
      <div className="SearchBar">
        <div className="SearchBar-sort-options">
          <ul>{this.renderSortByOptions()}</ul>
        </div>
        <div className="SearchBar-fields">
          <input
            placeholder="Search Businesses"
            onChange={this.handleTermChange}
          />
          <input placeholder="Where?" onChange={this.handleLocationChange} />
        </div>
        <div className="SearchBar-submit">
          <a href="www.#.com" onClick={this.handleSearch}>
            Let's Go
          </a>
        </div>
      </div>
    );
  }
}
export default SearchBar;

BusinessList

import React from "react";
import "./BusinessList.css";
import Business from "../Business/Business";

class BusinessList extends React.Component {
  render() {
    return (
      <div className="BusinessList">
        {this.props.businesses.map(business => {
          return <Business key={business.id} business={business} />;
        })}
      </div>
    );
  }
}

export default BusinessList;

App.js

import React from "react";
import "./App.css";
import SearchBar from "./components/SearchBar/SearchBar";
import BusinessList from "./components/BusinessList/BusinessList";
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 => {
      this.setState({ businesses: businesses });
    });
  }A
  render() {
    return (
      <div className="App">
        <h1>ravenous</h1>
        <SearchBar searchYelp={this.searchYelp} />
        <BusinessList businesses={this.state.businesses} />
      </div>
    );
  }
}

export default App;

Thank you

1 Like

I have exactly the same issue (same code, same error).

You need to input search keys for both business and location, I guess you are not entering any location in “Where?” blank

Thank you for your input. The error on screen shot occurs after putting the information (business and location) and hits the “let’s go” button

Hello, just been looking through the forums for help on the Ravenous part 4 - and I see I have the exact same error message that you were getting. did you ever solve the problem? Be good to hear if you did and how you solved it. It’s driving me nuts!

I have the exact same problem. can’t figure it out at all.

Looking through some of the questions asked, and seeing them go unanswered for so long, it doesn’t appear to me that codecademy PRO is good investment. I mean, this question was asked in January and up until now there has not been a reply. Some of these project veer towards the deep end really quickly, and for newbies like me, I’d expect to come to the forums to get answers to these questions. I just don’t feel motivated enough to continue renewing my subscription. That doesn’t mean that I didn’t find it useful. I hope the moderators take note

This is super old, but was just looking through the threads and I think I may have found your problem. It was back in Ravenous part 3, Step 4. The problem is SearchBar.

You need to move the sortByOptions object into the SearchBar component and change the name to this.sortByOptions (and change the references to it in renderSortByOptions()).

When I run my code without that, it might work initially but once you click on one of the three options (Best Match, Highest Rated, etc), I get the same error as you.

According to the Codecademy, this happens because:

  • A user doesn’t receive feedback after clicking on a sort option
  • The Yelp API won’t know which results to return if it isn’t clear which sort option has been selected.

Hope this helps!