I am accessing a REST Service that returns a JSON back. The JSON response is of the format
JQUERY_1234({ABC:[]}).
Using angularJS and IE9 as the browser, I get an error that says SCRIPT 5009: 'JQUERY_1234' is undefined. I am new to angular JS and would appreciate some guidance on where I am going wrong.
The same code works for another URL but fails on this one. Thanks for your help!
My controller code is:
var myNameSpace=angular.module('myApp',[]);
myNameSpace.controller('MyController',function MyController($scope,$http){
$http.jsonp('URL').success(function(data) {
$scope.artists = data;
})
.error(function (data, status, headers, config) {
alert("error:" + status);
return status;
});
$scope.orderAlerts='Name';
});
The URL string that is used for the JSON needs to have the parameter callback="JSON_CALLBACK". It is a mandatory parameter for http.jsonp
Related
What is wrong with this code:
function mainCtrl($scope, $http) {
function loadData(){ $http.jsonp('http://www.pais.co.il/Lotto/Pages/last_Results.aspx?download=1')
.then(function (data, status, headers, config) {
console.log(data);
},
function (data, status, headers, config) {
console.log(data);
});
}
loadData();
};
I have a simple call to a URL.
I can see in my network that it was a success (200).
But my the response is beeing catch in the error function:
You aren't getting a 404 error. You are getting an invalid JS error.
You are making a JSONP request. The URL is returning CSV data, not JSONP.
You need to either:
Use a URL that returns JSONP
Use XMLHttpRequest instead of <script> (which is what $http.jsonp does behind the scenes) to load the data and ensure that the suitable Access-Control headers are set to give your JS permission to read the data
Fetch the data from your server instead
With the code below I keep getting a 404 error. the hello.json file is in the root and I can access it in the browser since it is at localhost:3000/hello.json
not too sure what I did wrong and why this wont write and just returns a 404 not found error.
on click of the button(in the html) that runs the update function I get the alert with the error callback.
angular.module('seakrat')
.controller('MainCtrl', ['$scope','$http', function ($scope, $http) {
$scope.update = function(course){
$http.post("/hello.json", {hello: "there"})
.success(function(data, status, headers, config) {
alert('nailed it')
})
.error(function(data, status, headers, config) {
alert(data + status);
});
$scope.course = '';
};
}]);
You cannot write to a file using angularJS, its a client side framework. You need to have a serverside language to do this job.
I'm using AngularJS to try to pull down a list of reports from SSRS to display in an iframe. The problem I'm running into is that I am getting a SOAP fault error when doing the POST request.
Here is what the Angular controller looks like that is making the POST.
function ReportSSRSController($scope, $http, $location) {
$scope.request = '<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">'
+ '<soap:Body>'
+ '<m:ListChildren xmlns:m="http://example.com/ReportingServer/ReportService2010">'
+ '<m:ItemPath>/reports</m:ItemPath>'
+ '<m:Recursive>false</m:Recursive>'
+ '</m:ListChildren>'
+ '</soap:Body>'
+ '</soap:Envelope>';
$http({
method: 'POST',
url: '/ReportServer/ReportService2010.asmx',
data: $scope.request,
headers: {
'Content-Type': 'application/soap+xml; action="http://schemas.microsoft.com/sqlserver/reporting/2010/03/01/ReportServer/ListChildren"'
}
})
.success(function(data, status, headers, config){
console.log('In Success');
$scope.data = data;
})
.error(function(data, status, headers, config){
console.log('In Error');
console.log(data);
console.log(config);
});
}
And here is the gist of the SOAP fault error.
System.Web.Services.Protocols.SoapException: The value for parameter 'ItemPath' is not specified. It is either missing from the function call, or it is set to null.
As you can see in the Angular code, the ItemPath is included in the SOAP body in the same namespace as the function call. I can also see it in the console as the output of the data variable in the error block. So I'm wondering why it is not able to find that information.
Is there something I'm missing maybe in the way Angular is handling the POST request? Or have I not formulated the SOAP request correctly?
It turns out that the issue is related to the namespace in the SOAP XML.
When I changed the namespace to
http://schemas.microsoft.com/sqlserver/reporting/2010/03/01/ReportServer
to match the SOAP action (minus the command at the end); the request returned a valid SOAP response.
I'm not sure if this is a limitation of SOAP or SSRS though since I'm not very familiar with either.
I'm using Angular's $http service to get some data from a remote data source, but logging out the results to the console gives empty strings.
The function looks as follows:
$http.get('/some/url/')
.success(function(data/*, status, headers, config*/) {
console.log('Success! data: ', data);
})
.error(function(data, status, headers, config) {
console.log('failed http req!');
console.log('data: ', data);
console.log('status: ', status);
console.log('headers: ', JSON.stringify(headers()));
console.log('config: ', JSON.stringify(config));
});
I'm purposfully calling a URL I know does not exist and expecting to get a 404. When running from the browser (using cordova serve) I see all the error data printed out to the console.log.
I'm using Cordova ~3.4
I've installed the console plugin for Cordova.
I'm viewing the Android device log using adb logcat set to debugging.
Any ideas?
Update: I tried on all 4 variables to use JSON.stringify, just to see if that might work out of sheer luck in a moment of frustration... left them on the headers() and config since they're objects anyway. I still didn't get any print out on the data or status, which still puzzles me...
Cordova's console.log accepts only one argument (At least on Android) and that's why I've been getting only partial logging. Changing the code to:
$http.get('/some/url/')
.success(function(data/*, status, headers, config*/) {
console.log('Success! data: ' + data);
})
.error(function(data, status, headers, config) {
console.log('failed http req!');
console.log('data: ' + data);
console.log('status: ' + status);
console.log('headers: ' + JSON.stringify(headers()));
console.log('config: ' + JSON.stringify(config));
});
solved the problem.
The success and error callbacks actually decompose the response object into 4 arguments and pass them as parameters.
You should use the .then syntax for handing success and error:
$http(...).then(success,error)
The first argument to your error callback is the raw response object, which is in JSON format. You can extract some error information from it.
The success and error callbacks are convenient however, so moving this to a response interceptor might make more sense.
Passing multiple args to console.log is not recommended way in Cordova. You can contact the log instead. The reason is, Cordova uses WebKit under the hook, and WebKit's onConsoleMessage method has only one argument and it will always print the first. You can find more details on official docs for android.
I tested my php alone and it gave me this result
{"tabId":1,"tabName":"Main","uId":"1"}{"tabId":2,"tabName":"Photography","uId":"1"}
but my angularjs can't receive the callback, it return an error somewhere in angularjs
userId = '1';
$http({
url: "php/loadTab.php",
method: "GET",
params: {'userId':userId}
}).success(function(data, status, headers, config) {
console.log(data);
}).error(function(data, status, headers, config) {
});
the wierd thing I reuse the exact ajax code and it worked previously. Any thought on this?
the error : SyntaxError: Unexpected token {
at Object.parse (native)
the more strange thing : I purposely add another echo on my php and it able to console the value. what?!
The data from the server isn't valid JSON.
$httpProvider.defaults.transformResponse will try to parse the JSON if the data looks like JSON.
https://docs.angularjs.org/api/ng/service/$http
To fix this you could make the parent an array of objects like this
[{"tabId":1,"tabName":"Main","uId":"1"},{"tabId":2,"tabName":"Photography","uId":"1"}]