i trying filter json data current date using angular. have seen similar posts can't seem implement answers correctly. attempted write custom filter comparing today name of var holding date object doc.date json location of date entry want filter.
my json data looks this:
var books = [ { "doc":{ "date":"07/14", "title":"a nourishing ingredient", "quote":"where humility had formerly stood forced feeding on humble pie, begins mean nourishing ingredient can give serenity.", "attribution":"page 74", "text":"how focus on problems , frustrations? when having 'good day' these same problems shrink in importance , preoccupation them dwindles. wouldn't better if find key unlock 'magic' of 'good days' use on woes of 'bad days?'. have solution! instead of trying run away pain , wish problems away, can pray humility! humility heal pain. humility take me out of myself. humility, strength granted me 'power greater myself,' mine asking! humility bring balance life. humility allow me accept humanness joyously." } }, { "doc":{ "date":"07/15", "title":"pride", "quote":"time , again approached seventh step, fall , regroup. missing , impact of step escaped me. had overlooked? single word: read ignored, foundation of steps, indeed entire alcoholics anonymous program – word 'humbly.' understood shortcomings: put tasks off; angered easily; felt self-pity; , thought, why me? remembered, 'pride goeth before fall,' , eliminated pride life." } } ] my js:
var today = new date(); var dd = today.getdate(); var mm = today.getmonth()+1;//january 0, add + 1 var yyyy = today.getfullyear(); if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = mm+'/'+dd; console.log(today); var myapplication = angular.module('myapp', ['ngcolorthis']); myapplication.controller("catalog", function ($scope) { $scope.books = books; }) .filter('mydate', function() { return function (doc.date, today) { return doc.date < today; }; }); my html:
<div ng-app="myapp" ng-controller="catalog"> <div ng-repeat="book in books | mydate" color-this="background-color" data-color="book.doc.title"> <div > <div class="date">{{book.doc.date}}</div> <div class="title">{{book.doc.title}}</div> <div class="quote">{{book.doc.quote}}</div> <div class="attribution">{{book.doc.attribution}}</div> <div class="text">{{book.doc.text}}</div> </div> </div>
please find below code. hope you.
var myapplication = angular.module('myapp', []); myapplication.controller("catalog", function($scope) { var books = [{ "doc": { "date": "07/15", "title": "a nourishing ingredient", "quote": "where humility had formerly stood forced feeding on humble pie, begins mean nourishing ingredient can give serenity.", "attribution": "page 74", "text": "how focus on problems , frustrations? when having 'good day' these same problems shrink in importance , preoccupation them dwindles. wouldn't better if find key unlock 'magic' of 'good days' use on woes of 'bad days?'. have solution! instead of trying run away pain , wish problems away, can pray humility! humility heal pain. humility take me out of myself. humility, strength granted me 'power greater myself,' mine asking! humility bring balance life. humility allow me accept humanness joyously." } }, { "doc": { "date": "07/16", "title": "pride", "quote": "time , again approached seventh step, fall , regroup. missing , impact of step escaped me. had overlooked? single word: read ignored, foundation of steps, indeed entire alcoholics anonymous program – word 'humbly.' understood shortcomings: put tasks off; angered easily; felt self-pity; , thought, why me? remembered, 'pride goeth before fall,' , eliminated pride life." } }] $scope.books = books; }); myapplication.filter('mydate', function() { return function(input) { var today = new date(); var dd = today.getdate(); var mm = today.getmonth() + 1; //january 0, add + 1 var yyyy = today.getfullyear(); if (dd < 10) { dd = '0' + dd } if (mm < 10) { mm = '0' + mm } today = mm + '/' + dd; return (input == today) } });<!doctype html> <html> <head> <script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div ng-app="myapp" ng-controller="catalog"> <div ng-repeat="book in books" color-this="background-color" data-color="book.doc.title"> <div ng-show=" book.doc.date | mydate"> <div class="date">{{book.doc.date}}</div> <div class="title">{{book.doc.title}}</div> <div class="quote">{{book.doc.quote}}</div> <div class="attribution">{{book.doc.attribution}}</div> <div class="text">{{book.doc.text}}</div> </div> </div> </div> </body> </html>recommended: these kind of business logic should place in service better performance in real world case.
Comments
Post a Comment