Not able to fetch the json response through angularjs - json

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.

Related

unexpected token : from angular $http.jsonp request to Instagram API

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) {...

cannot get document id using box view api

In my app, after get "https://dl.boxcloud.com/*" url and send it to the View API, I receive this error:
{
message: "JSON parse error - No JSON object could be decoded"
type: "error"
request_id: "3ef12abcaf7a4c5abab5fb0d3959255e"
}
you can use this chrome extension to recreate this error
https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo
I tried with the other rest clients and it work correctly. Except in my app and the extension above.
I tried with the other rest clients and it work correctly. Except in my app and the extension above.
If this is the case, it's likely that the client you're using isn't actually sending properly formatted JSON. One way to debug this would be to output the raw HTTP request the client is sending and ensuring that it's actually sending the JSON properly.

Detect malformed/invalid JSON in an AngularJS $http.post() call

As can be seen in AngularJS's source, any $http.post request that returns an HTTP code in the 200-299 range will trigger the success() callback even if the response contains invalid data (like for example invalid JSON).
I'm specifically setting my call's responseType: 'json' and even then the success callback is fired when something else comes back. This is especially annoying in the development server where PHP's display_errors setting is turned on. When something goes wrong server-side and PHP outputs an error message the AngularJS app doesn't detect this and continues happily.
Is there a way to prevent this? I mean, to make the AngularJS app fire the error() callback when the response data is invalid JSON?
Thanks
so your PHP server responds with a 200 error code even on an error? Not knowing PHP, this feels like a server configuration problem to me. I'd expect a 500 error with a payload. That being said, there are two things that I can think of offhand.
$http includes transformResponse handlers you can set up to inspect the response for problems.
$http also includes the concept of "interceptors" which allow you to pick up the response payload and do something with it. You could use an interceptor to "reject" the response.
More information on transformResponse and "interceptors" in the $http documentation:
http://docs.angularjs.org/api/ng.$http

Getting `Unexpected token :` in angularjs but cannot use callback

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

cannot loop through json Uncaught SyntaxError: Unexpected token ILLEGAL

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.