I cant manage to loop through my json that i have setup at this url i just keep getting the following error Uncaught SyntaxError: Unexpected token ILLEGAL
here is my json http://example.com/api/?email=info#example.co.uk&format=json
i am trying to pull it in from the following code.
//json
var json_feed = 'http://example.com/api/?email=info#example.co.uk&format=json&callback=?';
$.getJSON(json_feed, function(json) {
console.log(json);
});
Where am i going wrong can someone advise.
Manage to get it to work with the following..
php
header('content-type: application/json; charset=utf-8');
echo json_encode($buckets);
jquery
$.ajax({
url: 'http://example.com/api/?email=info#example.co.uk&format=json',
success: function(data) {
console.log(data);
}
});
The url you have shown doesn't returns JSON but not JSONP. Due to the same origin policy restriction you cannot send cross domain AJAX calls unless the server supports JSONP. You have added the callback=? parameter to the url which is OK from the client side perspective as jQuery will send it, but the server seems to completely ignore it and it returns JSON instead of wrapping this JSON into the callback passed as parameter (which is JSONP).
You should probably contact the authors of the site you are trying to access or read the documentation of the API they are exposing (if any) to see if it supports JSONP.
Related
I am trying to load some images from a file on a server to display on a list. I get 404 not found error
after asking in forums, I get that the request URL is wrong, it looks inside the localhost not inside the json file.
https://filehost.net/db54d37849f75ddd
in the code I have a service which returns a response. I use that response in a controller and to the view. I get other information but no images
if anybody has a solution that would be really great.
please attach also some code, in this way it is easier to help you. About the problem, do have correct form of $http GET request? I mean does your get request points to correct address on server? something like this
`
// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
`
you can check more here Angular $http
Problem is when i try to use this code to get the log from tmi.twitch.tv api using url: http://tmi.twitch.tv/hosts?include_logins=1&target=70219146 i get Systax Error Unexpected Token. The code is:
$(document).ready(function() {
$.getJSON("http://tmi.twitch.tv/hosts?include_logins=1&target=70219146&callback=?", function (data) {
console.log(data.hosts)
});
})
I can get the data using php and json array like this:
$json_array = json_decode(file_get_contents('http://tmi.twitch.tv/hosts?include_logins=1&target=70219146'), true);
echo $json_array['hosts']['0']['host_login']."</br>";
But isnt there a way to use do this in html? thanks
You are trying to request regular JSON as JSONp (&callback=? activates jQuery's JSONp request method) which actually embeds the response into a <script> to execute it. However, the twitch API still returns JSON which is not valid JavaScript. Unless there is a way to make tmi.twitch.tv return valid JSONp, there is no way to do this directly from JavaScript unless you use a proxy like http://crossorigin.me/.
I'm making a request to an authorized Instagram account to display images on a site. Originally, I was running into No 'Access-Control-Allow-Origin' when using Angular's $http.get(....
From Matt's answer in this question, It seems that I can use getJSON, or Angular $http.jsonp, to bypass this issue. That Guy's answer also says "JSONP is really a simply trick to overcome XMLHttpRequest same domain policy".
So, I'm no longer getting that problem, and am getting a json payload:
{"pagination":{"next_url":"https:\/\/api.instagram.com... etc
But am getting a very ambiguous error:
Uncaught SyntaxError: Unexpected token :
This is a response from the Instagram API, so I'm not sure why there'd be a syntax error on the inbound json. Also, It's hard to locate the error since the jsonp response is all on a single line... where the error is reported.
The preview shows that I'm getting a full payload:
I found the issue. Unfortunately there are no JavaScript libraries to help with this, but in the Instagram API docs, for JSONP you can wrap the response with a callback so that the json payload will be wrapped in <script> tags (more info on jsonp here), therefore not blocked by Access Control Allow Origin.
https://api.instagram.com/v1/tags/coffee/media/recent?access_token=ACCESS-TOKEN&callback=callbackFunction
Response:
callbackFunction({
...
});
So, in your http request URI, you add in a callback parameter. Since I am using Angular, their docs for $http.jsonp() requests specify the callback string as "JSON_CALLBACK".
So, my request URL for Angular would be:
$http.jsonp(
'https://api.instagram.com/v1/tags/coffee/media/recent?
access_token=ACCESS-TOKEN&callback=JSON_CALLBACK')
.success(function(data) {...
Need to fetch the build values from apache.org. So i am using their api
https://builds.apache.org/api/json
I tried angularjs $http.jsonp but not able to fetch the data.
In chrome console under network json api is getting loaded but the data is not getting returned instead it is throwing the response as error.
app.controller("jsoncontroller",function($scope,$http){
var url='https://builds.apache.org/api/json';
$http.jsonp(url).success(function(data){
console.log('success');
})
.error(function () {
console.log('error')
});
});
Getting the error as
Uncaught SyntaxError: Unexpected token :
error
As per the jsonp angular docs, you must append JSON_CALLBACK to the URL: https://builds.apache.org/api/json?jsonp=JSON_CALLBACK
However, that URL doesn't work because even when the callback parameter is specified, the server still sends back a content-type of application/json, instead of the expected application/javascript. This causes it to be parsed (evidently) by the json parser instead of the javascript callback needed for JSONP to work. I'm not versed enough in JSONP or Angular to know who is it fault here.
I've made a fiddle with this working with another URL.
[Update]: The apache build server appears to use Jenkins, which has disable JSONP from the remote API. You can verify this yourself by trying to hit their jsonp endpoint, which returns a 403. You'll have to use another endpoint, no way I can see around this.
I'm trying to query the Spotify Metadata API with AngularJS but I keep running into the following error.
Uncaught SyntaxError: Unexpected token :
Now I know typically when querying you should add callback=JSON_CALLBACK as a query string but in this case it won't work. It returns:
Failed to load resource: the server responded with a status of 400 (Bad Request)
I am using $http.jsonp().
Example without callback | Example with callback
So, is there a way around this using pure Javascript or I'm best add a server-side wrapper (which I've got working but rather if it was pure Javascript)?
It doesn't seem like Spotify is providing jsonp support, but they do support CORS - so this should work:
function spotify_api($http) {
var url = "http://ws.spotify.com/lookup/1/.json?uri=spotify:track:5PJSqY8jbYzr4a6dl5Ory1";
//CORS support
delete $http.defaults.headers.common['X-Requested-With'];
$http.get(url).success(function(data) {
console.log(data);
});
}
See my update: http://jsfiddle.net/69kYH/
The bad news is that CORS doesn't seem to work properly in angular with older versions of IE - see AngularJS - Calling Flickr API fails with warning message