Hi, I need to create a dropdown list which uses a cross domain to populate it. And i have set a url for it but couldn't find why it is not working .
When the url is in json format it works without any issues but the url is in a xml format. And this is my first work on API's so I will be thank full if anybody help me with this...
---index.html---
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="script.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
li span.ng-binding {
color: #f00;
}
</style>
</head>
<body>
<div ng-controller="AppCtrl">
<h1>{{val}}</h1>
<select ng-options="p.ProductName for p in Product"></select>
</div>
</body>
</html>
---script.js---
var App = angular.module('App', [])
.controller('AppCtrl', function($scope, AppFact) {
$scope.val = "Testing the Page For CallsBacks";
AppFact.getData(function(Product) {
$scope.Product = Product;
});
})
.factory('AppFact', function($http) {
return {
getData: function(successcb) {
var url = 'http://xxxxxxxxx';
$http.jsonp(url).
success(function(Product, status, headers, config) {
//alert('ji');
console.warn(Product);
successcb(Product);
}).
error(function(Product, status, headers, config) {
//alert(Product);
//alert("Status is " + status);
});
}
};
});
And Here is my plunker:http://plnkr.co/edit/qq8sELDdZZB5QKe1Pj3T?p=preview
Plz guide me with this because i'm new to API's side..
Related
I want to display name in string format but Main.html page is not reading value from session.json page.so please help me
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope, Session) {
$scope.name = 'World';
$scope.session = Session;
});
app.run(function(Session) {}); //bootstrap session;
app.factory('Session', function($http) {
var Session = {
data: {},
saveSession: function() { /* save session data to db */ },
updateSession: function() {
/* load data from db */
$http.get('session.json')
.then(function(r) { return Session.data = r.data;})
}
};
Session.updateSession();
return Session;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Hello {{name}}</h1>
Welcome,
<pre ng-bind='session.data.username | json'></pre>
</body>
</html>
This is session.json page but in $http.get('session.json') it is not reading value from this page .
{ "username": "John Smith" }
how to read string from the json page to main.html and display
See the following code,
$http({
"method": "get",
"url": "session.json"
});
Here session.json and this file( the file in which this $http call is present) are in the same folder.
I would like to know the best practice for connecting with my API as it works as following:
GET -> products/list/latest -> return list of latest products
GET -> products/list/popular -> return list of popular products
GET -> products/list/trending -> return list of trending products
and then when I want a detail of the each product, it is just:
GET -> products/:id
I got the following code in my services.js:
.factory('ProductService', function ($resource) {
return $resource('http://domainname.com/api/products/:product',{product: "#product"});
})
But I really don't know how to access these custom URLs. Can I use the ngResource for that?
Thanks!
Please see here https://docs.angularjs.org/api/ngResource/service/$resource
you can add custom action to ngResources
ie:
var app = angular.module('app', ['ngResource']);
app.factory('ProductService', function($resource) {
var actions = {
'latest': {
method: 'GET',
url: 'api/products/latest '
},
'popular': {
method: 'GET',
url: 'api/products/popular'
},
'trending': {
method: 'GET',
url: 'api/products/trending '
}
};
var ProductService = $resource('/api/products/:productId', {ProductId: '#id'}, actions);
return ProductService;
});
app.controller('MainCtrl', function($scope, ProductService) {
$scope.name = 'World';
ProductService.latest();
ProductService.popular();
ProductService.trending();
ProductService.query();
ProductService.get({id: 1});
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>
I am very very new to AngularJS and programming and I am sure this is a basic question but I am having a difficult time finding our resources in how to achieve subtracting two $scope values consumed from a JSON file ($scope.carrierDiff). I would appreciate any help you can provide.
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body >
<div ng-controller="SiteCtrl">
<ul ng-repeat="site in sites">
<li>{{site.ID}}</li>
<li>{{carrierDiff}}</li>
</ul>
</div></body>
<script>
var app = angular.module("MyApp", []);
app.controller("SiteCtrl", function($scope, $http) {
$http.get('JSON/getsamplesitesCopy.json').
success(function(data, status, headers, config) {
$scope.sites = data;
$scope.carrierDiff = $scope.sites.Carrier - $scope.sites.Carrier2;
}).
error(function(data, status, headers, config) {
// log error
});
});
</script>
</html>
No need to calculate this separately
$scope.carrierDiff = $scope.sites.Carrier - $scope.sites.Carrier2;
You just have to do this...
<body >
<div ng-controller="SiteCtrl">
<ul ng-repeat="site in sites">
<li>{{site.ID}}</li>
<li>{{site.Carrier - site.Carrier2}}</li>
</ul>
</div>
</body>
With my limited knowledge of what is coming back from the file you are retrieving, it seems as though you are referencing the JSON data incorrectly. You need to reference $scope.sites OR data, not a hacked up version of both. If the structure of data looks like this:
data = {Carrier: 5, Carrier: 4}
Then you would reference Carrier like so:
data.Carrier1
So when you move data to $scope.sites, you are referencing the JSON in data and it would be referenced without the need to point out that it came from data
$scope.sites.Carrier1
So you code should look like so:
http://plnkr.co/edit/nnfewy?p=preview
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body >
<div ng-controller="SiteCtrl">
<ul ng-repeat="site in sites">
<li>{{site.ID}}</li>
<li>{{carrierDiff}}</li>
</ul>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("SiteCtrl", function($scope, $http) {
$http.get('JSON/getsamplesitesCopy.json').
success(function(data, status, headers, config) {
$scope.sites = data;
$scope.carrierDiff = $scope.sites.Carrier - $scope.sites.Carrier2;
}).
error(function(data, status, headers, config) {
// log error
});
});
</script>
</body>
</html>
Another item to remember, you should have you <script> in the head or in the body, not outside. See the modification in the code above.
I am having some problems, I appear to be getting the data in the callback but can't seem to get to it, to be honest I'm not entirely sure what is going on.
When I click the "Get Movie" button, I get the following in the console:
Error: response is undefined
app</$scope.addBook#http://onaclovtech.com/apps/movies/:42:1
Wa.prototype.functionCall/<#https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:162:14
Mc[c]</<.compile/</</<#https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:178:390
zd/this.$get</h.prototype.$eval#https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:101:134
zd/this.$get</h.prototype.$apply#https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:101:399
Mc[c]</<.compile/</<#https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:178:370
Xc/c/<#https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:27:145
q#https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:7:357
Xc/c#https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js:27:129
When I look at the network tab after the button press I get the following:
http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=[api-key]&q=The%20Way%20Of%20The%20Gun&page_limit=1&callback=angular.callbacks._0
When I look at the debugger I get a movies.json response object that looks like this:
angular.callbacks._0(
{"total":1,"movies":[{"id":"15775","title":"The Way of the Gun","year":2000,"mpaa_rating":"R","runtime":119,"critics_consensus":"","release_dates":{"theater":"2000-09-08","dvd":"2001-06-19"},"ratings":{"critics_rating":"Rotten","critics_score":48,"audience_rating":"Upright","audience_score":71},"synopsis":"","posters":{"thumbnail":"http://content7.flixster.com/movie/11/17/79/11177993_tmb.jpg","profile":"http://content7.flixster.com/movie/11/17/79/11177993_tmb.jpg","detailed":"http://content7.flixster.com/movie/11/17/79/11177993_tmb.jpg","original":"http://content7.flixster.com/movie/11/17/79/11177993_tmb.jpg"},"abridged_cast":[{"name":"Ryan Phillippe","id":"162676004","characters":["Parker"]},{"name":"Benicio Del Toro","id":"162652510","characters":["Longbaugh"]},{"name":"James Caan","id":"162656402","characters":["Joe Sarno"]},{"name":"Juliette Lewis","id":"162654115","characters":["Robin"]},{"name":"Taye Diggs","id":"162655514","characters":["Jeffers"]}],"alternate_ids":{"imdb":"0202677"},"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/15775.json","alternate":"http://www.rottentomatoes.com/m/way_of_the_gun/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/15775/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/15775/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/15775/similar.json"}}],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies.json?q=The+Way+Of+The+Gun&page_limit=1&page=1"},"link_template":"http://api.rottentomatoes.com/api/public/v1.0/movies.json?q={search-term}&page_limit={results-per-page}&page={page-number}"}
)
So the data all appears to be there, I am just having a hard time figuring out how to get it.
Could someone help point me in the direction of getting the data correctly?
(I do plan to move the angularjs controller to a .js file eventually, but for now it's in the .html file, sorry)
This is my original code:
Index.html
<!DOCTYPE html>
<html ng-app="myapp" manifest="covers.appcache">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.11/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<script src="rottentomatoes.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style type="text/css">
<!--
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
-->
</style>
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
</head>
<body ng-controller="MyController">
<div align="left">
<button type="button" class="btn btn-primary btn-lg active" ng-click="addBook()">Get Movie</button>
</div>
<br />
<div>
{{data}}
{{success}}
<script>
var app = angular.module("myapp", ["video"])
.controller('MyController', ['$scope', '$video', function($scope, $video) {
$scope.addBook = function(e) {
var response = $video.search('[api-key]', 'The Way Of The Gun', '1');
response
.success(function(data, status) {console.log('SUCCESS' + data); $scope.data = data; $scope.status = status;})
.error(function(data, status) {console.log('ERROR' + status); $scope.data = data; $scope.status = status;});
// Found somewhere that said I needed a jsonp_callback function, I just tried it to see if it did anything, doesn't appear to
function jsonp_callback(data) {console.log('JSONP' + data); $scope.data = data; };
}
}]);
app.config(function($httpProvider) {
//Enable cross domain calls
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
});
</script>
</body>
</html>
rottentomatoes.js
angular.module('video', []).factory('$video', ['$http', function($http) {
return {
search: function(api_key, query, page_limit) {
var method = 'JSONP';
var url = "http://api.rottentomatoes.com/api/public/v1.0/movies.json?";
$http({
method: method,
url: url + "apikey=" + api_key +
"&q=" + query +
"&page_limit=" + page_limit + '&callback=JSON_CALLBACK'
});
}
};
}]);
In the $video.search() method, you return nothing hence the error occurred.
You could just return the $http() call like this and it should work:
angular.module('video', []).factory('$video', ['$http', function($http) {
return {
search: function(api_key, query, page_limit) {
var method = 'JSONP';
var url = "http://api.rottentomatoes.com/api/public/v1.0/movies.json?";
return $http({
method: method,
url: url + "apikey=" + api_key +
"&q=" + query +
"&page_limit=" + page_limit + '&callback=JSON_CALLBACK'
});
}
};
}]);
As general tips:
use an unminified angular.js instead of angular.min.js while debugging, it will give you more meaningful errors.
no need to define the jsonp_callback function, angular will handle that for you
avoid naming your own service with a $ prefix i.e. $video. The $ prefix is preserved for anything that built-in in the angularjs.
I am trying to get data from resource then add it to isolate scope of directive but when i want to print it to screen i get error as undefined current_page here is the script
/**
* Created by yigit on 10.01.2014.
*/
var app = angular.module('kategori', [
'ngResource',
'apiBaseRoute'
]);
app.factory('Data', ['$resource', 'apiBaseRoute', function($resource, config){
return $resource(config.apiBasePath + 'kategori/?page=:page',{page:1},{
query:{
isArray: false,
method: 'GET'
}
});
}]);
app.controller('KategoriListCtrl',['$scope', 'Data', function($scope, Data){
$scope.allData = {data:null};
Data.query({}, function(data){
$scope.kategoriList = {data:data.cat.data};
$scope.allData.data = data.cat;
});
}]);
app.directive('paginate', function(){
return{
scope:{paginatorData: '=paginate'},
link: function(scope){
alert(scope.paginatorData.current_page);
}
}
});
<!DOCTYPE html>
<html ng-app="kategori">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="col-md-6 col-md-offset-3" ng-controller="KategoriListCtrl">
{{allData.current_page}}
<div paginate="allData"></div>
</div>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-resource.js"></script>
<script src="js/kategori.js"></script>
<script src="js/apiroute.js"></script>
</body>
</html>
I read this article nested scope
But could not solve my problem.
So, the code alerts undefined. How can i solve this?
Can you show your HTML? You'll need to pass the property like this:
<div data-paginate="paginate"></div>