Please Help! Ravenous Part 4 - Yelp API

I am stuck on the last part of Ravenous, part 4. I am having trouble getting a good response from the Yelp API. I followed the instructions carefully and did some troubleshooting, but keep getting an error in the browser related to cors-anywhere.

I can confirm that Yelp.js’s search function is firing with a console.log, but it seems like the issue is with cors, because the request doesn’t "pass the access control check: No ‘Access-Control-Allow-Origin’ header is present. I have tried adding that header in but it didn’t work. Maybe I didn’t do it right but there’s nothing about that header in the instructions. Please help! Thanks!

Console error messages:
Screen Shot 2020-10-26 at 10.44.04 AM|690x75

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

Here is my Yelp.js and App.js:

const apiKey =
  "removed";

const Yelp = {
    
  search(term, location, sortBy) {
    return fetch(   `https://corsanywhere.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 => {
          console.log(jsonResponse.businesses)
        if (jsonResponse.businesses) {
          return jsonResponse.businesses.map(business => {
            return {
              id: business.id,
              imgSrc: 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;

And here is my App.js:

import React from "react";
import "./App.css";
import BusinessList from "./../BusinessList/BusinessList";
import SearchBar from "./../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) {
    console.log(`searchYelp fired off`)
    Yelp.search(term, location, sortBy)
    .then(businesses => {
      console.log(businesses)
      this.setState({
        businesses: businesses
      })
    })
  }

  render(){
    console.log(this.state.businesses)
  return (
    <div className="App">
      <h1>tumtum.</h1>
      <SearchBar searchYelp={this.searchYelp} />
      <BusinessList businesses={this.state.businesses} />
    </div>
  )
  };
}

export default App;

Hi there.

I’m not sure how it’s happened, because the code you’ve posted seems to be fetching the right URI… but the error you’re getting is attempting to fetch https://api.jquery.com/jquery.getjson/https://api.yelp.com/v3/businesses/search?term=taco&location=&sort_by=best

If your code is attempting to directly fetch this URI from your local machine, which the presence of localhost would suggest, then the CORS error is expected - it’s what CORS Anywhere is there to address in this project. :slight_smile:

Do you have an unsaved edit somewhere, or an error with the URI you’re passing to fetch() in the Yelp component?

You could have an issue in the SearchBar component since that one gets passed searchYelp function as a prop and uses searchYelp in the handleSearch method. Perhaps post that code as well.

Otherwise, just noticed a small issue in Yelp.js which may prevent images from rendering. Check the key-value pair of imgSrc: business.image_url. I think it should be imageSrc: business.image_url in order to match what gets displayed as an image in the Business component. But this is not your major issue.

Hi,
not sure but i think there is a problem in the first part of the URL:

your first part is :`https://corsanywhere.herokuapp.com/
but it should be : https://cors-anywhere.herokuapp.com/

Thanks but I actually got this working. The frustrating part is I don’t know how. I tried another method I found online, then went back to my old way and it all of a sudden worked. I did realize the image_url / imageSrc thing and fixed that.

Thanks for the reply!

2 Likes

Thanks, I added the dash and it didn’t seem to change. I actually got this working. The frustrating part is I don’t know how. I tried another method I found online, then went back to my old way and it all of a sudden worked.

Thanks for the reply!

Thanks but I actually got this working. The frustrating part is I don’t know how. I tried another method I found online, then went back to my old way and it all of a sudden worked. The path I sent to fetch in Yelp seemed fine. I am now running into this exact same issue with the next project, Jammming.

My response from the search function in Yelp.js, and now in Spotify.js comes back as undefined…then when you console.log the jsonResponse, it is this cors anywhere stuff instead of Spotify data…

Any further wisdom on this? I can supply code for the Jammming project too, but maybe I need to make another post.

Thanks for the reply!

Odd… I’d recommend a new topic, just so we can keep things separate and not confuse some Jammmmmming stuff with Ravenous. :slight_smile:

Here’s the new topic if you’re interested: Jammming project: Spotify API returns cors-anywhere response

1 Like