AngularJs and jsonp not working - angularjs

I have some problems with jsonp and AngularJs
I one page, i have to make about 15 json calls, each one by jsonp
My calls look like this :
$http.jsonp("http://www.example.com/feed1.json?callback=JSON_CALLBACK1")
And in my json feed, the data is wrapped by JSON_CALLBACK1
But i always obtain this error :
Uncaught ReferenceError: JSON_CALLBACK1 is not defined
Now i noticed in the network tab in the Google Chrome inspector that the call was :
http://www.example.com/feed1.json?callback=angular.callbacks._0
So i changed my json file, to wrap data with angular.callbacks._0(); instead, and it worked for this one, but it did not work for all my json
I started wraping all my jsons with angular.callbacks._1, angular.callbacks._2, angular.callbacks._3 ... byt i noticed that the number isn't always the same ? and if the number is a two digits, it doesn't work. For example, i tryed angular.callbacks._15, and i always obtain this error
Uncaught ReferenceError: angular.callbacks._15 is not defined
So is there a way to fix all those jsonp problems once for all with AngularJs ?
Thanks

The callback=angular.callbacks._123 parameter is an information for the server that the client (browser) expects the response to be wrapped inside a function named angular.callbacks._123 like so:
angular.callbacks._123({
"key": "value"
});
You should change your server code to inspect the parameter value and if present use it as the wrapping function name.
You can find more details in wikipedia.

Related

Drupal Services JSON response format processing with Angularjs

I have a Drupal web service that returns a JSON response in the following format. I can easily access top level notes e.g. title. However, I also need to access the value under body. I can get body.und but not body.und.value. How do I do that? Also the HTML tags are showing as text and I can see all the slashes getting printing in my Angular View.
Update: I have been able to get the the value of the body by using $scope.body
= myresponse.data.body.und[0].value;
Now the only problem is how to process HTML in the body. My Angular framework which is Ionic is showing all the HTML tags e.g. p li etc instead of formatting them.
{"vid":"37","uid":"1","title":"Terms of Use","log":"","status":"1","comment":"1","promote":"0","sticky":"0","nid":"37","type":"page","language":"und","created":"1395878580","changed":"1501982359","tnid":"0","translate":"0","revision_timestamp":"1501982359","revision_uid":"1","body":{"und":[{"value":"THESE TERMS OF USE (\"TOU\") ARE A LEGAL CONTRACT BETWEEN YOU (\"USER\") AND
$scope.body = myresponse.data.body.und[0].value; helped me get access to the value of the body of the node.
ng-bind-html="body" helped me get access to the body of the HTML.

Dynamical URL in $httpbackend - Angular unit testing

I am trying to dynamically add URL parameter to $httpbackend.whenGET
urlAll = "http://localhost:8080/api/Log";
urlById = "http://localhost:8080/api/Log?id=";
$httpBackend.whenGET(urlAll).respond(...); - This is Working fine
$httpBackend.whenGET(urlById).respond(...); - Not working
I append id dynamically to urlById when I call mock service. Since it is a dynamic value and the url is changing with dynamic id value, url is not matching with urlById (which is passed to httpbackend). Hence, throwing below exception.
Unexpected request: GET /http:\/\/localhost:8080\/api\/Log?id=/1e970422-a1a7-4ea5-9f74-1c84b53d7bc4
No more request expected
Gone through different posts and tried with regex. but ended up with below exception:
Unexpected request: GET /http:\/\/localhost:8080\/api\/Log\?id=.*/14f99a26-7850-4aa6-9953-db73fb1a1cab
Expected GET /http:\/\/localhost:8080\/api\/Log\?id=.*/.*/g
Any idea on how to add dynamical url to $httpbackend?
Most of the posts say the theoretical solutions and some posts given code changes, which didn't work. Any idea on what is wrong above?

Getting the Angular Typeahead to work with JSONP and JSON with properties

I've been pulling my hair out trying to get the $http.json() to properly return a result set of objects. I have locally stored examples of the same response and they work fine.
Can anyone look at this code and tell me what I'm doing wrong? It has to do with returning $http or something in that bit.
Demo: http://plnkr.co/edit/x325wZ4mwi9DNM8tAxgH?p=preview
You seem to have changed your plunker. The first one where you were using $http.jsonp call seems close but with CORs issues it is hard to test - you should definitely check the encoding type of your JSONP returned data is correct. However...
I would structure the $http.get as per the code below. Now that you have dropped $http.jsonp in favour of $http.get, also note that you may now need to explicitly unpack the returned JSON data string into a javascript object via jsonDecode. Lastly you will likely have to unwrap your server response to return just the json payload with no JSON_CALLBACK() wrapper.
var url = 'http://sitesbyjoe.com/angular-tests/typeahead/schools.php?callback=JSON_CALLBACK'
$http.get(url).success(function(data) {
console.log(data);
$scope.schools = angular.jsonDecode(data);
});

How to intercept AngularJS $http logging for display in page

I want to intercept console log message from AngularJS and display them in a div on the page. I need this in order to debug ajax traffic in a PhoneGap app.
This is an example of the kind of errors I want to capture:
I tried this Showing console errors and alerts in a div inside the page but that does not intercept Angular error messages.
I also tried the solution gameover suggested in the answers. No luck with that either. Apparently $http is handling error logging differently.
I guess the answer you tried has the right idea but you're overriding the wrong methods. Reading here I can see angularJs uses $log instead of console.log, so to intercept you can try to override those.
Something like this:
$scope.$log = {
error: function(msg){document.getElementById("logger").innerHTML(msg)},
info: function(msg){document.getElementById("logger").innerHTML(msg)},
log: function(msg){document.getElementById("logger").innerHTML(msg)},
warn: function(msg){document.getElementById("logger").innerHTML(msg)}
}
Make sure to run that after importing angular.js.
EDIT
Second guess, override the consoleLog method on the LogProvider inner class on angular.js file:
function consoleLog(type) {
var output ="";
//arguments array, you'll need to change this accordingly if you want to
//log arrays, objects etc
forEach(arguments, function(arg) {
output+= arg +" ";
});
document.getElementById("logger").innerHTML(output);
}
I've used log4javascript for this purpose. I create the log object via
var log = log4javascript.getLogger('myApp')
log.addAppender(new log4javascript.InPageAppender());
I then use this in a value dependency, and hook into it where needed (e.g. http interceptor).
A more lightweight approach might be to use $rootScope.emit and then have a component on your main page which prepends these log messages to a visible div, but this will require you to change all your calls to console.log (or redefine the function in your js).
I think that this message is not even displayed from AngularJS. It looks like an exception which has not been caught in any JavaScript (angular.js just appears on top of your stack because that's the actual location where the HTTP request is being sent).
Take a look at ng.$exceptionHandler. That should be the code you seem to be interested in. If not, take a quick web search for „JavaScript onerror“ which should tell you how to watch for these kinds of errors.
I would rather user an $http interceptor.
Inside the responseError function, you can set a property on a service that will be exposed to the div's scope.

angularjs resource - invalid label or OPTIONS

My question is similar but not the same as this one.
Here is my fiddle
I'm working with a public resource. I don't think it is jsonp. (the flag they use is pjson which i think, to them , means pretty json).
If i have the method as JSONP it will call out and return but then i get an invalid label error. If i have the method set as GET i get the OPTIONS error in firebug (which i typically associate with cross-domain violations).
Oddly, my app calls out to other external resources without issue - so i'm not sure how it is getting that done and can't do this. Am I SOL if i have no control over this outside resource?
$scope.serviceDesc = layerRes.get();
It looks like you can make JSONP calls to this service you're using by specifying a callback=JSON_CALLBACK in the url parameters when using the $http service, or in your case the $resource service
Have a look at this example that I've written up: http://plnkr.co/edit/7EE85Mr8bZBUroQTp5A9?p=preview
$http.jsonp('http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/0?f=json&callback=JSON_CALLBACK')
.success(function(data) {
console.log('The data from their server:');
console.log(data);
$scope.worldPhysicalMap = data;
});
Converting this to use $resource shouldn't be much different.

Resources