Extract Yelp's rating

Question

I have this locations.json file where I store the titles, locations (lat, long), and phone numbers. The issue I'm facing right now might seem trivial to others but as a beginner I couldn't get it to work the way I like. I want to extract the ratings only from Yelp's api v3 and add it to the locations.rating array. The code I have below appends the whole response object return from Yelp, but when I tried to console.log (response.businesses[0].rating) it was able to print out only the rating. How do I make it return only the rating? Thanks in advance.

var yelpPhoneSearch = "https://api.yelp.com/v3/businesses/search/phone?phone=";
var cors_anywhere_url = 'https://cors-anywhere.herokuapp.com/';  // Yelp v3 api doesn't support CORS, need to use this 3rd party proxy service
var locations = [];
$.getJSON('/locations.json', function(data){
  for (var i = 0; i < data.length; i++) {
    var schools = {};
    schools.title = data[i].title;
    schools.location = data[i].location;
    schools.phone = data[i].phone;
    schools.rating = $.ajax({
      "async": true,
      "crossDomain": true,
      "url": cors_anywhere_url + yelpPhoneSearch + data[i].phone,
      "method": "GET",
      "headers": {
        "authorization": "Bearer " + yelpToken.access_token,
        "cache-control": "public, max-age=31536000",
      }
    }).done(function(response){
      // console.log(response);
      var rating = response.businesses[0].rating;
      return rating;
    });
    // Push all infos to locations array
    locations.push(schools);
  }
});

Answer 1

using jQuery promises (which are almost like regular Promises except guaranteed to be available in old browsers) you can rewrite your code like so

var yelpPhoneSearch = "https://api.yelp.com/v3/businesses/search/phone?phone=";
var cors_anywhere_url = 'https://cors-anywhere.herokuapp.com/';  // Yelp v3 api doesn't support CORS, need to use this 3rd party proxy service

$.getJSON('/locations.json')
.then(function(data){
    return $.when.apply($, data.map(function(school) {
        return $.ajax({
            "async": true,
            "crossDomain": true,
            "url": cors_anywhere_url + yelpPhoneSearch + school.phone,
            "method": "GET",
            "headers": {
                "authorization": "Bearer " + yelpToken.access_token,
                "cache-control": "public, max-age=31536000",
            }
        }).then(function(response) {
            return {
                title: school.title,
                location: school.location,
                phone: school.phone,
                rating: response.businesses[0].rating
            };
        });
    }));
}).then(function() {
    var locations = [].slice.call(arguments);
    /* here locations is an array of 
    {
        title,
        location,
        phone,
        rating
    }
    */
});

Note: because of the asynchronous nature of $.ajax you can't access the array of results outside of the last .then because asynchronous code is asynchronous

For completeness - ES2015+ with native Promises, the code would be

$.getJSON('/locations.json').then(data => 
    Promise.all(data.map(school => 
        $.ajax({
            "async": true,
            "crossDomain": true,
            "url": cors_anywhere_url + yelpPhoneSearch + school.phone,
            "method": "GET",
            "headers": {
                "authorization": "Bearer " + yelpToken.access_token,
                "cache-control": "public, max-age=31536000",
            }
        }).then(response => ({
            title: school.title,
            location: school.location,
            phone: school.phone,
            rating: response.businesses[0].rating
        }))
    ))
).then(locations => {
    /* here locations is an array of 
    {
        title,
        location,
        phone,
        rating
    }
    */
});

If you need to access locations in some other parts of your code, and assuming the code in your question is not taken from a function (i.e. the vars are all global scoped)

var yelpPhoneSearch = "https://api.yelp.com/v3/businesses/search/phone?phone=";
var cors_anywhere_url = 'https://cors-anywhere.herokuapp.com/';  // Yelp v3 api doesn't support CORS, need to use this 3rd party proxy service

var locations = $.getJSON('/locations.json')
.then(function(data){
    return $.when.apply($, data.map(function(school) {
        return $.ajax({
            "async": true,
            "crossDomain": true,
            "url": cors_anywhere_url + yelpPhoneSearch + school.phone,
            "method": "GET",
            "headers": {
                "authorization": "Bearer " + yelpToken.access_token,
                "cache-control": "public, max-age=31536000",
            }
        }).then(function(response) {
            return {
                title: school.title,
                location: school.location,
                phone: school.phone,
                rating: response.businesses[0].rating
            };
        });
    }));
}).then(function() {
    return [].slice.call(arguments);
});

Now, in code where ever you need to use locations, you'll need to get access to the result using typical Promise methodology

locations.then(function(value) {
    // in here,  value is an array of locations
});

Without seeing how you are using locations in your actual code, this may not be as easy as above, because, once you deal with asynchronous code, you need to deal with it properly