Cannot retrieve data from Yelp API using jQuery.ajax()
Question
I am trying to use jQuery.ajax() method to retrieve JSON data from Yelp API but its displaying nothing in the console.
The new Yelp authorization just requires headers to be sent as:
"Authorization": "Bearer <apikey>"
along with the GET request URL with params. Postman is displaying the results but I cannot use it in my API. My code for .ajax goes here:
var myurl = "https://api.yelp.com/v3/businesses/search?term=by-chloe&location=boston";
$.ajax({
url: myurl,
headers: {
'Authorization': 'Bearer xxxxxxxxxxxxx',
},
method: 'GET',
dataType: 'json',
success: function(data) {
console.log('success: ' + data);
}
});
Do I need any changes in this one or is there something wrong?
1 answers
solution1
3 ACCPTED 2018-07-18 02:44:19
I found that the issue when I tested your script was simply a CORS related one; by appending CORS-anywhere API to the URL I was able to hit your endpoint with your exact same code. Try the code below (just swap your API key)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
var myurl = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=by-chloe&location=boston";
$.ajax({
url: myurl,
headers: {
'Authorization':'Bearer xxxxxxxxxxxxxxxxxxxxxxx',
},
method: 'GET',
dataType: 'json',
success: function(data){
console.log('success: '+data);
}
});
</script>
</body>
</html>
// Edit -- Please see the code below for usage on how to use the values returned from the API.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="results">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
var myurl = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=by-chloe&location=boston";
$.ajax({
url: myurl,
headers: {
'Authorization':'Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
},
method: 'GET',
dataType: 'json',
success: function(data){
// Grab the results from the API JSON return
var totalresults = data.total;
// If our results are greater than 0, continue
if (totalresults > 0){
// Display a header on the page with the number of results
$('#results').append('<h5>We discovered ' + totalresults + ' results!</h5>');
// Itirate through the JSON array of 'businesses' which was returned by the API
$.each(data.businesses, function(i, item) {
// Store each business's object in a variable
var id = item.id;
var alias = item.alias;
var phone = item.display_phone;
var image = item.image_url;
var name = item.name;
var rating = item.rating;
var reviewcount = item.review_count;
var address = item.location.address1;
var city = item.location.city;
var state = item.location.state;
var zipcode = item.location.zip_code;
// Append our result into our page
$('#results').append('<div id="' + id + '" style="margin-top:50px;margin-bottom:50px;"><img src="' + image + '" style="width:200px;height:150px;"><br>We found <b>' + name + '</b> (' + alias + ')<br>Business ID: ' + id + '<br> Located at: ' + address + ' ' + city + ', ' + state + ' ' + zipcode + '<br>The phone number for this business is: ' + phone + '<br>This business has a rating of ' + rating + ' with ' + reviewcount + ' reviews.</div>');
});
} else {
// If our results are 0; no businesses were returned by the JSON therefor we display on the page no results were found
$('#results').append('<h5>We discovered no results!</h5>');
}
}
});
</script>
</body>
</html>
Remember swap your API key to make the above example work.
CORS is usually enabled server-side; it's a way to prevent unauthorized domains from connecting to and getting data outside of what's allowed; I think if you whitelist the IP address of your server you may still run into issues; I've built many projects which all required bypassing CORS (either using the CORS-Anywhere API, or by making a request asking for JSONP datatype). Cors-Anywhere in general is an open-sourced API you can implement it on your own server or continue using it from the heroku URL; either way you should be able to complete your project.
Please let me know if the above code sample worked for you; Thanks! - Ilan
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.