Trying to Map Yelp API repsonse

Question

I am using the Yelp API (by making requests to it using https://cors-anywhere.herokuapp.com/ as a proxy—because the Yelp API itself isn’t CORS-enabled) to attempt to create an app very similar to a Yelp search for my own practice. I am able to get the response into my browser's console. The response has an array named businesses with the businesses that match the search. I am trying to use .(map) to map through the businesses array. However, I keep getting Cannot read property 'map' of undefined.

The reponse I receive from the Yelp API is below. Thanks Yelp API Response Image

Also if there is any other tips about javascript that come to mind when looking at my code please share as I am very early into my programming career.

const Yelp = {
  getAccessToken: function() {
    if(accessToken) {
      return new Promise(resolve => resolve(accessToken));
    };
    return fetch(accessTokenUrl, {
      method: 'POST'
    }).then(response => response.json()).then(jsonResponse => {
     accessToken = jsonResponse.access_token;
    })
  },

  search: function(term,location,sortBy) {
    return this.getAccessToken().then(() => {
      const yelpRetrieveUrl = `${corsAnywhereUrl}https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`;
      return fetch(yelpRetrieveUrl, {
        headers: {Authorization: `Bearer ${accessToken}`}
    });
  }).then(jsonResponse => {
  if(1 > 0){
    console.log('true!!!!');
    return jsonResponse.businesses.map(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,
        rating: business.rating,
        reviewCount: business.review_count
      };
    });
  } else {
    console.log('FALSE')
  }

  })
}

};

Thank you for mentioning this, I didn't realize that I needed to accept an answer. — Dylan Brinkley, Dec 01 '17 at 05:27

marpme · Accepted Answer · 2017-09-04T06:37:27.533

fetch(myRequest).then(function(response) {
    var contentType = response.headers.get("content-type");
    if(contentType && contentType.includes("application/json")) {
      return response.json();
    }
    throw new TypeError("Oops, we haven't got JSON!");
  })
  .then(function(json) { /* process your JSON further */ })
  .catch(function(error) { console.log(error); });

You might search for the jsonResponse#json function to turn your json dataset into a real object that you can process in JavaScript.

And because you asked for it: As you are using Promises, make use of the Promise#Catch function to handle upcoming errors. Don't let the browser handle them, because they can have different behaviors in different browsers.

And probably remove the 1 > 0 check, because it will always be true, but I think this was only for test purposes.

I hope I could help you! I might append the code later since I'm currently on mobile.

Trying to Map Yelp API repsonse

1 Answers1