I am trying to get some basic information from the BTC Guild API through AngularJS, but all it does is run in the error function and gives no output as to what the error is. Firebug shows nothing in the error object when breaking in that function. Any ideas?
jsfiddle link: http://jsfiddle.net/bX3ar/11/
javascript:
angular.module('BTCGuild', []);
function BTCGuildCtrl($scope, $http) {
$http.get('https://www.btcguild.com/api.php?api_key=').success(function (response) {
$scope.error = 'response:' + response;
$scope.unpaidRewards = response.user.unpaid_rewards;
}).error(function (error, status) {
$scope.error = 'error:' + error + status;
});
}
html:
<!doctype html>
<head>
<script type="text/javascript" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script type="text/javascript" src="btcguild.js"></script>
</head>
<html ng-app="BTCGuild">
<body>
<div ng-controller="BTCGuildCtrl">
<table>
<p>{{unpaidRewards}}</p>
<p>Error:{{error}}</p>
</table>
</div>
</body>
</html>
A couple of notes:
You're going to get a "Cross Origin Request" error. Here's a snippet of the response after fixing it:
OPTIONS https://www.btcguild.com/api.php?api_key= No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
Take a look at these notes on how to properly format a JSFiddle for Angular: Frameworks & Extensions should be No Library - pure JS, and No wrap, in . Also, you'll want to put this under Fiddle Options: Body Tag <body ng-app="BTCGuild">
Here is the updated JSFiddle: http://jsfiddle.net/bX3ar/14/
If you can get through the CORs issue, you'll see this work. Or if you put in a fake response, you can see it display properly.
Related
This has been frustrating me a bit. I have a restful services giving JSON data running on the link:
http://localhost:51133/API/SalesSystem/
So its running locally on my computer. I can get the data from this service with no problem using my WPF based interface.
Another service I am testing with is this one:
http://rest-service.guides.spring.io/greeting
But from my own service something seems to go wrong somehow and I cannot figure out what goes wrong. I have even tried just taking the full response and printing it. With the second service, I get a long list of data regarding the response, but with my own I still get nothing. As if the function was not used at all.
This is my Angular code:
angular.module('demo', [])
.controller('Hello', function ($scope, $http) {
$http.get('http://localhost:51133/api/salessystem/').
//http://rest-service.guides.spring.io/greeting
//http://localhost:51133/API/SalesSystem/
then(function (response) {
$scope.hello = 'hello';
$scope.district = response;
});
});
and this is my html code:
<!doctype html>
<html ng-app="demo">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="Scripts/hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<li>Id: <button>{{hello}}</button></li>
<li>Area: {{district}}</li>
<ul ng-repeat="obj in hello">
<li>Area: {{obj.area}}</li>
</ul>
<p>The ID is {{hello.Id}}</p>
<p>The content is {{hello.Area}}</p>
</div>
</body>
</html>
Can anyone see the problem? The spring rest service shows all kinds of data about the response and it also shows the button with "hello" inside it. But when I use my own service link it seems there is no $scope returned at all.
Oh, and this is the json returned when I just visit the link directly in the browser: (its an array of 3 districts)
[{"Id":1,"Area":"North Denmark","PrimarySalespersonID":1,"PrimarySalesperson":{"Id":1,"Name":"Tom B. Erichsen"},"SecondarySalespersons":null,"Stores":null},{"Id":2,"Area":"Southern Denmark","PrimarySalespersonID":2,"PrimarySalesperson":{"Id":2,"Name":"Eric B. Thomsen"},"SecondarySalespersons":null,"Stores":null},{"Id":3,"Area":"Eastern Denmark","PrimarySalespersonID":3,"PrimarySalesperson":{"Id":3,"Name":"Ben Anderson"},"SecondarySalespersons":null,"Stores":null}]
I am trying to fetch data from REST API but it results blank.
index.html
<html ng-app="demo">
<head>
<title>Hello AngularJS</title>
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>
</div>
</body>
</html>
hello.js
angular.module('demo', [])
.controller('Hello', function($scope, $http) {
$http.get('http://rest-service.guides.spring.io/greeting').
then(function(response) {
$scope.greeting = response.data;
});
});
output:
The ID is
The content is
ID and content is still missing. Any help please?
Edit:(FIX) Problem was with a plugin installed in the browser, which weren't allowing web service. Thanks everyone.
Well Seems like your api return following response:
{
"id": 879,
"content": "Hello, World!"
}
try fetching response.content for accessing message
I tried to run your code in my local. I observed that if you replace http from https in you request, it wont work. Try to run this from file protocol in your browser and it will work as shown in the picture.
Also the api you mentioned is now working over HTTPS.
Edit your controller with following one
angular.module('demo', [])
.controller('Hello',
function ($scope, $http) {
var callMethod = function() {
$http.get('http://rest-service.guides.spring.io/greeting')
.then(function(response) {
$scope.greeting = response.data;
alert($scope.greeting.id);
alert($scope.greeting.content);
},
function(error) {
console.log(error);
});
}
callMethod();
});
I am a beginner in angular js. I am experimenting with $http service in angularjs. I am accessing a web service. It returns expected response when using curl statement in ubuntu but is not succeeding when the parameter in curl is mapped to $http.post() parameter. Please take a look at my code for both curl and angularjs page. Please point me out my mistake and help me to resolve the issue.
curl --data "email=test#test5.com" HTTP://dummy.dummyplane.com/dummyservices/UserExists
Result:
{"Data":"123456","Success":true,"Exception":null}
Angularjs code
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="registerController">
<button ng-click='Register()' style='margin-top:15px'>Register</button>
</div>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('registerController', function($scope, $http) {
$scope.Register = function() {
$http({
url:'http://tethys.dev.riekerinc.com/totalsolutions/UserExists/',
method:'POST',
data:{"email":"tina#test5.com"},
headers:{'Content-Type':'application/x-www-form-urlencoded'}
}).success(function(data){
//console.log(data)
alert("Success");
});
};
});
</script>
</body>
</html>
You set the content type to the correct value, but you don't tell angular to use a different serializer than the default one, so it still sends it in JSON format.
Use $httpParamSerializerJQLike, or simply send the data as a string:
data: 'email=tina#test5.com'
Simple AngularJS script with user:passw and server.ip
<!DOCTYPE html>
<html >
<script src= "angularjs/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<p>{{ names }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', ['$scope','$http', function($scope,$http) {
$http.get('http://user:passwd#server.ip:5984/dbp/3c9f8c470a4a40d81d43467346000010')
.success(function (data) {
$scope.names = data.rows;
});
}]);
</script>
</body>
</html>
If I use url & put in address bar in my browser, everything works fine
http://user:passwd#server.ip:5984/dbp/3c9f8c470a4a40d81d43467346000010
I mean I get json data.
When I use previous script I get
Remote Address:server.ip:5984
Request URL:http://server.ip:5984/dbp/3c9f8c470a4a40d81d43467346000010
Request Method:GET
Status Code:401 Unauthorized
How can I get json data from CouchDB with authorization header in AngularJS?
CouchDB & AngularJS are on the same server!
I read all 111 q/a (AngularJS CouchDB) from stackoverflow and I didn't find right answer.
I have enable CORS!
You have to send the username/password pair in an Authorization header. (as #pankajparkar has answered correctly before)
The reason why it simply works in the browser address bar is that the browser does this step automatically for you.
I've an app that retrieve server data using ajax. I've tested in localhost, the loader work fine, but when I install my extension and click on the browser action popup, the loader won't show. The little popup delayed for 2 second and shows the result.
popup.html
<div class="cssLoader" ng-show="loader">Fetching...</div>
js
app.controller('MainControl', function($scope, $http){
$scope.loader = true;
$http({
url: "http://www.corsproxy.com/mydomain.net/items.php",
method: "GET",
}).success(function(data) {
$scope.data = data;
$scope.loader = false;
});
});
Without seeing more of your code it is difficult to know for sure. Nonetheless, my suspicion (based upon the fact that your code works outside of the Chrome extension environment but not inside that environment) is that since you're operating in a Chrome Extension environment, you'll need to include the ng-csp directive (see Chrome documentation or Angular documentation).
I developed an Angular app inside a chrome extension and I needed to use ng-csp in order for Angular to load and fully function properly.
Essentially, Chrome extensions (and even more apps) place a number of restrictive security permissions on the browser environment and ng-csp tells Angular to operate in a way that is more consistent with a strict CSP.
I have included an example below that shows loading the entire Angular application properly:
<!DOCTYPE html>
<html ng-app="myApp" ng-csp>
<head>
<meta charset="utf-8">
<title>My Extension</title>
<link href="css/index.css" rel="stylesheet">
<!-- Include in the next line your Angular library code -->
<script type="text/javascript" src="js/angular-lib.js"></script>
<!-- Include in the next line your custom Angular code such as the $http to load the loader -->
<script type="text/javascript" src="js/myapp.js"></script>
</head>
<body>
<!-- Place your HTML code for the 'Fetching' anywhere here in the body -->
</body>
</html>
According to the docs, CSP "is necessary when developing things like Google Chrome Extensions" (more info can be found on the linked page).
Furthermore, besides defining ng-csp on your root element, there is on more crucial point (which affects ngShow/ngHide):
CSP forbids JavaScript to inline stylesheet rules. In non CSP mode Angular automatically includes some CSS rules (e.g. ngCloak). To make those directives work in CSP mode, include the angular-csp.css manually.
I found this to be necessary only if the angular.js script is defined inside the app's context.
In any case, here is the source code of minimal demo extension that seems to work fine for me:
Structure:
extension-root-dir/
|_____manifest.json
|_____popup.html
|_____popup.js
|_____angular.js
|_____angular-csp.css
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"browser_action": {
"default_title": "Test Extension",
//"default_icon": {
// "19": "img/icon19.png",
// "38": "img/icon38.png"
//},
"default_popup": "popup.html"
}
}
popup.html:
<!DOCTYPE html>
<html>
<head>
<title>Test Extension</title>
<link rel="stylesheet" href="angular-csp.css" />
</head>
<body ng-csp ng-app="myApp" ng-controller="mainCtrl">
<div ng-show="loader">Fetching...</div>
<div ng-hide="loader">{{status}}</div>
<script src="angular.js"></script>
<script src="popup.js"></script>
</body>
</html>
popup.js:
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($http, $scope) {
$scope.loader = true;
$http({
url: "http://www.corsproxy.com/mydomain.net/items.php",
method: "GET"
}).finally(function () {
$scope.loader = false;
}).then(function (response) {
$scope.data = response.data;
$scope.status = 'Success !';
}, function (response) {
$scope.status = 'ERROR !';
});
});
(BTW, I am using AngularJS v1.2.16.)