Ravenous Part 4 - Bonus - Make images clickable and have them open the business’ website in a new tab

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

Task: Bonus - Make images clickable and have them open the business’ website in a new tab

Problem: I can’t find the actual business website in the API documentation (https://www.yelp.com/developers/documentation/v3/business_search), only a Yelp url. They give the example "url": "https://www.yelp.com/biz/four-barrel-coffee-san-francisco".

On the page https://www.yelp.com/biz/pizza-pilgrims-london it does include an external link to pizzapilgrims.co.uk so it must be in the API somewhere. I just can’t find it.

Attempt so far:

render() {
    return (
      <div className="Business">
        <div className="image-container">
          <a href={this.props.business.url} target="_blank" rel="noreferrer">
            <img
              src={this.props.business.imageSrc}
              alt={this.props.business.name}
            />
          </a>
        </div>
....

Hello,

Unfortunately, Yelp doesn’t offer the direct URL for a business using their APIs. This post from Github is a few years old but the information is still relevant: https://github.com/Yelp/yelp-fusion/issues/103

Without resorting to using web-scraping techniques (fetching the URL and extracting the information yourself), you’re going to be limited to the Yelp business page URL for each business.

You have the right idea for the bonus feature, though. Using that business landing page from Yelp would still be helpful for the user and demonstrate your understanding of the flow of data in the project.

1 Like