CODEWITHSUNDEEP
javascriptjqueryajaxjsonapi
notthehoff
notthehoff

Reputation: 1242

How to process external api JSON and not JSONP

I am trying to make calls to the BreweryDB API and if I go directly to the api url (http://api.brewerydb.com/v2/search/geo/point?key=MYKEYHERE&lat=46.8677308&lng=-96.81083149999999&callback=?), it returns what looks like good json.

{
currentPage: 1,
numberOfPages: 1,
totalResults: 4,
data: [],
status: "success"
}

When I run a json request via jQuery

$.getJSON("http://api.brewerydb.com/v2/search/geo/point?key=MYKEYHERE&
lat=46.8677308&lng=-96.81083149999999&callback=?", function(){console.log("herp my derp");})

it does not execute successfully and my printed text to the console does not execute. In FF I get 

enter code here SyntaxError: missing ; before statement

If I remove the callback parameter, I get the cross site scripting ditty. 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 
http://api.brewerydb.com/v2/search/geo/point?key=MYKEYHERE&lat=46.867741699999996&lng=-96.811004. 
(Reason: CORS header 'Access-Control-Allow-Origin' missing).

I originally was trying to use jsonp, but it appears that they do not provide a response in that format. yay.

How can I process this JSON using jQuery/Javascript only?

Upvotes: 1

Views: 458

Answers (2)

Steven Moseley
Steven Moseley

Reputation: 16355

To evade sandbox restrictions, try proxying their service via your server.

Here's an example using PHP.

Your JS:

$.getJSON("/brewery.php?lat=46.8677308&lng=-96.81083149999999", function(){console.log("herp my derp");})

brewery.php:

<?php
echo file_get_contents("http://api.brewerydb.com/v2/search/geo/point?key=YOURKEYHERE&lat={$_GET['lat']}&lng={$_GET['lng']}&callback=?");

Upvotes: 1

ceejayoz
ceejayoz

Reputation: 180147

How can I process this JSON using jQuery/Javascript only?

They'd need to either add CORS headers or JSONP responses. There's nothing you can do on your end to get this working with just jQuery/JavaScript - any workaround on your end only is going to have to involve something server-side.

Upvotes: 2

Related Questions