I want to get THE MOVIE REVIEWS API by The New York Times. I tried it using AngularJS but I was not provided.Can someone help me?
var app = angular.module('movieApp', []);
app.controller('movieController',
function movieController($scope, $http) {
$scope.fetchReviews = function() {
var api = 'http://api.nytimes.com/svc/movies/v2/reviews/all.jsonp?&offset=20&order=by-opening-date&api-key=XXX MY KEY XXX&responce-format=.jsonp&callback=JSON_CALLBACK';
$http.jsonp(api).success(function(data){
$scope.results = data.results;
});
}
});
HTML
<!DOCTYPE html>
<html lang="en" ng-app="movieApp">
<head>
<meta charset="UTF-8">
<title>Movie Review</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-controller="movieController">
<ul class="review-cards">
<li ng-repeat="item in results">
<h2>{{item.display_title}}</h2>
<p>{{item.summary_short}}</p>
</li>
</ul>
</div>
</body>
</html>
You have to handle that event to some element or just call it in your controller.
var app = angular.module('movieApp', []);
app.controller('movieController',
function movieController($scope, $http) {
// define default value
$scope.results = [];
$scope.fetchReviews = function() {
var api = 'http://api.nytimes.com/svc/movies/v2/reviews/all.jsonp?&offset=20&order=by-opening-date&api-key=XXX MY KEY XXX&responce-format=.jsonp&callback=JSON_CALLBACK';
$http.jsonp(api).success(function(data){
$scope.results = data.results;
});
}
// call that event
$scope.fetchReviews();
});
Try it.
app.controller('movieController', function ($scope, $http) {
$scope.fetchReviews = function() {
var api = 'http://api.nytimes.com/svc/movies/v2/reviews/all.jsonp?&offset=20&order=by-opening-date&api-key=XXX MY KEY XXX&responce-format=.jsonp&callback=JSON_CALLBACK';
$http.jsonp(api).success(function(data){
$scope.results = data.results;
});
}
$scope.fetchReviews();
});
check like this
Related
Here is my calling html code
<!DOCTYPE html>
<html>
<head>
<title>Display Card Type</title>
</head>
<script src='Card.js'; ></script>
<body>
<script>
var card = new myCardType();
var value = new myCardType();
card.setCard('I am a club');
value.setFace('I am an Ace');
card.showSuit();
value.showFace();
</script>
</body>
</html>
And here is the separate function (saved in same folder).
function myCardType(){
this.suit = suit;
this.showSuit = function(){
alert(this.suit);
}
this.face = value;
this.showFace = function() {
alert(this.face);
}
this.setCard = function (newSuit) {
this.suit = newSuit;
}
this.setFace = function (newValue) {
this.face = newValue;
}
}
Spent ages reviewing this but just cannot see what is going on, grateful for any clues.
<html>
<body ng-app="MyApp">
<div ng-controller="MainCtrl as vm">
<li ng-repeat="file in vm.filesArray">{{file.title}}</li>
</div>
<script src="https://apis.google.com/js/auth.js" type="text/javascript"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/ngDrive/build/module.js"></script>
<script>
var myApp = angular.module('MyApp', ['ngm.ngDrive']);
angular.module('ngm.ngDrive')
.provider('OauthService', ngDrive.Config)
.config(function (OauthServiceProvider) {
OauthServiceProvider.setScopes('https://www.googleapis.com/auth/drive.file');
OauthServiceProvider.setClientID('10503878599-98uqrqmgq2f3kc1sbr13l6rma20ue7l0.apps.googleusercontent.com');
});
var MainCtrl = (function () {
function MainCtrl(DriveService) {
this.filesArray = DriveService.files.list({
q: 'trashed = false',
maxResults: 10,
fields: 'items/title'
}, true).data;
}
MainCtrl.$inject = ['DriveService'];
return MainCtrl;
})();
angular.module('MyApp').controller('MainCtrl', MainCtrl);
</script>
</body>
</html>
I am using ngDrive by pinoyyid .
This is my index.html .
I have provided a valid client ID.
It returns an empty array in files array.
Please suggest any solution
I have a requirement that i need to read a excel file from any location and to render the data of the excel on the next html page.
I was able to render the excel data with multiple sheets on the same page but now I need to select the file on first page and render its data on the next html page.
Like this:
And on the next screen need to show excel data:
Here in the Sheet Name i need to provide the sheet names from excel and on selecting any sheet name that sheet data need to be loaded in the grid.
I have used two divs to divide the page vertically in two columns.
I was able to achieve this functionality on a single page but now I need to divide this code in multiple pages.
This is the plunker of the work done:
http://plnkr.co/edit/xHEtxtzKrEiKDTrqlafC?p=preview
This is my js code:
angular.module('app', ['ui.grid'])
.controller('MainCtrl', ['$scope', function($scope) {
var vm = this;
vm.gridOptions = {};
vm.reset = reset;
vm.selectedSheet = '';
vm.sheetIndex = 0;
function reset() {
vm.gridOptions.data = [];
vm.gridOptions.columnDefs = [];
vm.selectedSheet = '';
vm.sheetIndex = 0;
}
vm.readSheet = function() {
var workbook = XLSX.read(vm.data, {
type: 'binary'
});
var headerNames = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]], {
header: 1
})[0];
vm.sheetNames = workbook.SheetNames;
var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]]);
vm.gridOptions.columnDefs = [];
headerNames.forEach(function(h) {
vm.gridOptions.columnDefs.push({
field: h
});
});
vm.gridOptions.data = data;
};
vm.onLoadData = function(data) {
vm.data = vm.data || data;
vm.readSheet();
};
vm.sheetChange = function() {
vm.sheetIndex = vm.sheetNames.indexOf(vm.selectedSheet);
vm.readSheet();
};
}])
.directive("fileread", [function() {
return {
scope: {
onLoadData: '&'
},
link: function($scope, $elm, $attrs) {
$elm.on('change', function(changeEvent) {
var reader = new FileReader();
reader.onload = function(evt) {
$scope.$apply(function() {
$scope.onLoadData({
data: evt.target.result
});
$elm.val(null);
});
};
reader.readAsBinaryString(changeEvent.target.files[0]);
});
}
}
}]);
HTML code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl as vm">
<button type="button" class="btn btn-success" ng-click="vm.reset()">Reset Grid</button>
<br />
<br />
<div id="grid1" ui-grid="vm.gridOptions" class="grid">
<div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length">
<div class="msg">
<div class="center">
<span class="muted">Select Spreadsheet File</span>
<br />
<input type="file" accept=".xls,.xlsx,.ods" multiple="true" fileread="" on-load-data="vm.onLoadData(data)"/>
</div>
</div>
</div>
<div>
<select ng-model="vm.selectedSheet" ng-options="names as names for names in vm.sheetNames"
ng-change="vm.sheetChange()"></select>
{{vm.selectedSheet}}
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I think i need to store this JSON somewhere, so that it can be used later in different pages.
Should I use service to achieve this functionality or any other approach need to be used please suggest.
I hope this might help!
You can just store the Json data in to any rootScope variable to use in another controllers.
For Example:
You have the following code;
vm.readSheet = function() {
var workbook = XLSX.read(vm.data, {
type: 'binary'
});
var headerNames = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]], {
header: 1
})[0];
vm.sheetNames = workbook.SheetNames;
var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]]);
vm.gridOptions.columnDefs = [];
headerNames.forEach(function(h) {
vm.gridOptions.columnDefs.push({
field: h
});
});
vm.gridOptions.data = data;
};
in here
vm.gridOptions.data = data;
you can set and store data for later usage as an JSON Array;
$rootScope.gridOptionsData = data;
how to check textbox isEmpty in angularjs Factory?
My HTML Source is
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type="text" ng-model="test">
</div>
</body>
</html>
angular.module('myApp', [])
.controller('customersCtrl', function($scope){
$scope.changed = function(){
if(!$scope.test){
$scope.msg = 'empty';
} else {
$scope.msg = 'not empty';
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type="text" ng-model="test" ng-change="changed()"/>
{{ test }} | {{ msg }}
</div>
var customersCtrl = function($scope,Validate){
var isEmpty = Validate.isEmpty($scope.test);
$scope.Validation = Validate;
if(isEmpty){
console.info('Textbox is empty');
}else{
console.info('Textbox is not empty');
}
};
angular.module('myApp').controller('customersCtrl', customersCtrl);
var Validate = function() {
var factory = {};
factory.isEmpty = function(val){
var result = false;
if(!val){
result = true;
}
return result;
};
return factory;
};
angular.module('myApp').factory('Validate', Validate);
Here is the Plunker according to your requirement.
In your controller, you can check the model value at any point in time. Like
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
if($scope.test == ""){
// textbox is empty, do your stuff here
}
});
additional trick !
you can check it on angular expression . see this below to example !
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.test = "";
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type="text" ng-model="test">
<span ng-show="test.length == 0">
is empty </span>
</div>
</body>
</html>
hope !
I've setup a little script for testing JRS and a clientfilter. I've used what I could find on the internet to set it up but it ain't working. I'm trying to perform a client side fetch on a JRS using clientFilter. Nevertheless the JRS is querying the backend in stead of performing the fetch clientsided. I pasted the script below, I hope one of you can explain why it isn't working.
Thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="js/dojo-release-1.7.2/dojo/resources/dojo.css"/>
<link rel="stylesheet" type="text/css" href="js/dojo-release-1.7.2/dijit/themes/tundra/tundra.css"/>
<script>
dojoConfig= {
has: {
"dojo-firebug": true
},
parseOnLoad: true,
isDebug: true,
locale: "nl"
};
</script>
<script type="text/javascript" src="js/dojo-release-1.7.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojox.data.ClientFilter");
dojo.require("dojox.data.JsonRestStore");
dojo.require("dijit.form.Button");
myStore = new dojox.data.JsonRestStore({target:"TARGET"});
myStore.fetch();
dojo.ready(function() {
dojo.connect(dijit.byId("query"), "onClick", function() {
myStore.fetch({query:{id:"4"},queryOptions:{cache:true}, onItem: function(item) {console.log(item); }});
});
});
</script>
</head>
<body cllass="tundra">
<button type="button" id="query" data-dojo-type="dijit.form.Button">Query</button>
</body>
I made a jsfiddle that shows how to do this with the new syntax and dojo stores.
http://jsfiddle.net/SgyYW/
require([
"dojo/store/Cache",
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/parser",
"dojo/on",
"dojo/ready",
"dijit/form/Button",
"dijit/registry"
],function(Cache,JsonRest,Memory,parser,on,ready,Button,registry){
console.log('x');
var someData = [
{id:1, name:"One"},
{id:2, name:"Two"},
{id:3, name:"Three"},
{id:4, name:"Four"},
{id:5, name:"Five"}
];
recToQuery = 4;
// recToQuery = 6; // try one that is not in the cache
var memoryStore = new Memory({data: someData});
var restStore = new JsonRest({ target: "/i/dont/exist.json/"});
var myStore = new Cache(restStore, memoryStore);
myStore.query({}); // this will ask for everything and prime the cache
ready(function(){
parser.parse();
var queryBtn = registry.byId("query");
console.log('queryBtn',queryBtn);
on(queryBtn, "click", function() {
console.log('query button clicked',[this,arguments]);
var resultOrPromise = myStore.get(recToQuery);
if (typeof resultOrPromise.then ==='function'){
// it is asking the server
resultOrPromise.then(function(){
console.log('Result from server fetch',arguments);
},function(){
console.log('it queried the server but failed',arguments);
});
}else{
// it is in the cache (from the first query)
console.log('result from cache:',resultOrPromise);
}
});//end connect
}); //end ready
}); //end require