I am a newbie angular js developer. Recently i am trying to build an application that uses Yahoo Query Language (YQL). I actually need the cricket.teams data from the data table. So, i am just making a $http resquest from the controller of the angularjs with the REST Query provides by Yahoo.
Here i my view:
<div ng-controller="ProfileCtrl">
<div style="height:80vh">
{{Hello}}
</div>
</div>
Here is my controller
app.controller('ProfileCtrl',function($scope,$http){
$scope.Hello='Welcome';
var url ='https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20cricket.teams&format=json&diagnostics=true&env=store%3A%2F%2F0TxIGQMQbObzvU4Apia0V0&callback=';
// Simple GET request example :
$http.get(url).
success(function(data, status, headers, config) {
alert(data);
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
alert('error'+status);
});
});
It is returning Error with the status 0. that means there is somehow an error. what i am doing wrong here ??
NB. i have tried with $http.jsonp() . and its giving the same result.
If you are getting status 0 then it might be due to illegal cross-origin request https://stackoverflow.com/a/10910212/1061668
Despite that your code is fully functional, see related plunker here http://plnkr.co/edit/xFAnI7
Following api call
$http.get(url).then(function(response) {
$scope.response = angular.toJson(response.data);
}).catch(function(response) {
$scope.response = response;
});
Will return something like
{"query":{"count":14,"created":"2015-05-05T10:38:27Z","lang":"fi-FI","diagnostics":{"cache":{"execution-start-time":"0","execution-stop-time":"3","execution-time":"3","method":"GET","type":"MEMCACHED","content":"TABLE.yql-query-yahooapis-com.v1.production.manhattan.bf1.yahoo.com.cricket.teams.cb28f8540307fdb68289fa5fedc2b832"},"url":[{"execution-start-time":"4","execution-stop-time":"9","execution-time":"5", ... etc etc
Related
I am trying to get a $http REST GET call working in my Appgyver project working but nothing I do seems to come right, always returns an error.
Please note the angular app will be running on mobile devices eventually and then connect to my remote web service.
I've double checked that my custom API is working and returning data correctly in a number of ways, namely:
hard coded cUrl request running from sh files in terminal - Returns data and correct 200 code
Tested the API end points in both POSTMAN and Firefox's SOA client.
Putting in my test end point of http://somesite.com/quote-and-buy-performance/druidapi/taxonomy_term returns data as below:
[{"tid":"1","vid":"2","name":"ACME Ltd.","description":"","format":"filtered_html","weight":"0","parent":"0","uri":"http://somesite.com/quote-and-buy-performance/druidapi/taxonomy_term/1"},{"tid":"2","vid":"2","name":"ABC Films LTD","description":"","format":"filtered_html","weight":"0","parent":"0","uri":"http://somesite.com/quote-and-buy-performance/druidapi/taxonomy_term/2"}]
Even a simple CSRF Token request gives me errors.
Could someone possibly point out where I am going wrong here, the Appgyver site is badly documented and I have tried the Angular RESTful sample which my code below is based upon from https://docs.angularjs.org/api/ng/service/$http and https://docs.angularjs.org/api/ng/service/$http#setting-http-headers
Please note the code below is basically Angular.js using Javascript syntax (as opposed to Coffeescript), logging output follows the code
angular
.module('main')
.controller('LoginController', function($scope, supersonic, $http) {
$scope.navbarTitle = "Settings";
$scope.stoken = "Response goes here";
$scope.processLogin = function(){
var csrfToken;
steroids.logger.log("START CALL: processLogin");
// $form_login_email_address = $scope.login_email;
// $form_login_password = $scope.login_password;
$local_get = "http://somesite.com/quote-and-buy-performance/services/session/token";
$hal_get_taxterm_index = "http://somesite.com/quote-and-buy-performance/druidapi/taxonomy_term";
// $http.defaults.headers.common.contentType('application/json');
var req = {
method: 'GET',
url: $hal_get_taxterm_index,
headers: {
'Content-Type': 'application/json'
}
}
$http(req)
.success(function(data, status, headers) {
steroids.logger.log("Inside http.get() success");
}).error(function(data, status, headers){
steroids.logger.log("Inside http.get() WITH ERROR");
steroids.logger.log('data: ' + data);
steroids.logger.log('status: ' + status);
}).then(function(data, status, headers){
steroids.logger.log("Inside http.get() then");
});
steroids.logger.log("END CALL: processLogin");
}
});
Logging output from calls to steroids.logger.log
View Time Level Message
main#login 16:01:55.219 info "Inside http.get() WITH ERROR"
main#login 16:01:55.219 info "data: null"
main#login 16:01:55.219 info "status: 0"
main#login 16:01:55.64 info "END CALL: processLogin"
main#login 16:01:55.64 info "START CALL: processLogin"
Here's what I would do:
Separate out your http call into a service. This is a pretty standard way to modularize your code in angular:
angular.module('main').factory("SomeService", function($http) {
return {
get: function() {
$http({
url: "http://somesite.com/quote-and-buy-performance/druidapi/taxonomy_term",
method: "GET",
headers: {
"Content-Type": "application/json"
}
}).success(function(data, status, headers, config) {
console.log("Success!");
console.log(data);
}).error(function(data, status, headers, config) {
console.log("Error!");
console.log(status);
console.log(data);
});
}
}
})
Then to use this in your controller, just include it in your controller declaration and call get like you would a normal method:
angular.module('main').controller('LoginController', function($scope, supersonic, SomeService) {
$scope.navbarTitle = "Settings";
$scope.stoken = "Response goes here";
$scope.processLogin = function(){
var csrfToken;
steroids.logger.log("START CALL: processLogin");
SomeService.get();
steroids.logger.log("END CALL: processLogin");
}
})
Do this and then comment back with your results and we can work from there.
If your angular's app is within a certain domain, then HTTP request must be made within the same domain.
In your case, you are trying a cross domain request (a request on another domain). You must then make a cross domain request.
You can see this question.
The author uses $http.jsonp() to send cross domain requests. There migth be another way to do it.
I've been working with angular and I have an error when I do a ajax request post with angularjs I don`t know what is the error just I can see a message, I would like to know what kind error is it more details.
.error(function(data, status, headers, config) {
console.log(data);
console.log("error");
});
Any reason this doesn't work?
$http.get('http://localhost:8383/api/login.php').respond(function (method, url, data, headers) {
return authorized ? [200, customers] : [401];
});
I know another way to do it, but would like to know why this doesn't work, as it seems to match the syntax in the docs.
safari: 'undefined is not a function'
chrome: 'err_empty_response'
Sincere thanks for the help... it is greatly appreciated!
There is no method respond as far as i know :-)
Either use suceess with error or use then
$http.get('http://localhost:8383/api/login.php').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
$http.get('http://localhost:8383/api/login.php')
.then(function(result) {
//USe result here
});
Doc
I am trying to access the dreamfactory data through $http request. To handle cross domain request, i have just added the JSON callback with the url.
.factory('DonorService', ['$resource','$http', '$q',
function($resource,$http,$q){
return{
getDonors:function(){
var donor = "https://dsp-sixerofsixes.cloud.dreamfactory.com/rest/db/icbd_donors/?callback=JSON_CALLBACK&app_name=blooddonate&fields=*";
var deferred = $q.defer();
$http.jsonp(donor).
success(function(data, status, headers, config) {
console.log(data);
deferred.resolve(data);
}).
error(function(data, status, headers, config) {
console.log(data);
});
return deferred.promise;
}
}
}])
But on making the request it creates a internal server error in the df. while typing the url in the browser shows the data along with wrapping callback.
Link to the JSON data
Link which is actually called from JSONP
I can't comment yet, so I guess I'll have to write this here.
Remove the resource injection. Just use $http.
ngResource incrementally creates those angular callback names.
I need to get JSON data from a server with URL :
http://xxxx.xxxx.xxxx.xxxx:8084/inpulse/api/user/listall
Here's my angular code:
var app = angular.module('app',[]);
app.controller('Controller', function ($scope,$http) {
$scope.email="";
$scope.password="";
$scope.sample="";
$http({
method: 'GET',
url: 'http://xxxx.xxxx.xxxx.xxxx/inpulse/api/user/listall',
})
.success(function (data, status, headers, config) {
var ret = data;
$scope.sample = JSON.stringify(ret);
})
.error(function (data, status, headers, config) {
alert(status);
// something went wrong :(
});
});
Now the same code worked when i used a JSON test URL like http://ip.jsontest.com/.
Its Definitely not a problem with the server because I tested it with a REST client and got a response. I can't figure out what I'm doing wrong.
It might be a CORS configuration issue.
If you are trying to access the server from a page that is not in the same domain/origin, you'll get an error because the server is not configured to allow CORS.
The error reported by Chrome looks like this:
XMLHttpRequest cannot load http://xxxx.xxxx.xxxx.xxxx/inpulse/api/user/listall. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
Other than that the code seems to work just as expected.