Some JSON data services on the Internet are designed to be consumed only by servers and neglect the possibility of being consumed directly by a web-only app.
Due to cross-site concerns, such services would work if they either provided a JSONP
format or enabled CORS
support.
I want to make a little JavaScript tool that can call an online resource that only returns JSON
and not , and does not support .
One example case was a single-page app I was making for which the only data source I could find didn't provide CORS
or JSONP
. Being a single-page app, it had no server of its own so was subject to the same-origin policy.
What strategies are available in such cases?
**One way is to find a proxy that can access a JSON
data source and then serve it to your web app transformed to work with JSON
, CORS
, or any other format that you can handle without worrying about cross-site concerns.
One such proxy is Yahoo's "YQL".
YQL supports both JSONP and CORS.
So if your browser also supports CORS you can think of it as a free JSON to JSON proxy server. If not, then it is also a free JSON to JSONP proxy:
Here's an example of how I used it with jQuery:
$.getJSON("http://query.yahooapis.com/v1/public/yql",
{
q: "select * from json where url=\"http://airportcode.riobard.com/airport/" + code + "?fmt=JSON\"",
callback: gotJSON, // you don't even need this line if your browser supports CORS
format: "json"
},
function(data){
if (data.query.results) {
/* do something with
data.query.results.json.code
data.query.results.json.name
data.query.results.json.location
*/
} else {
/* no info for this code */
}
}
);
And a version on jsfiddle...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With