Can We Filter Nested Json Data Using Custom Filter In Angular Js
I am new to angular js and was trying to filter nested json data(basically i want to display date for past few days based on users entry) in angular js using custom filter. Basical
Solution 1:
Your dates' type is String, and you'd better change them to timestamps or Date object in JavaScript.
There is some example code:
<span ng-non-bindable>{{1288323623006 | date:'medium'}}</span>:
<span>{{1288323623006 | date:'medium'}}</span><br>
<span ng-non-bindable>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>:
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span><br>
<span ng-non-bindable>{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span>:
<span>{{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}</span><br>
<span ng-non-bindable>{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}</span>:
<span>{{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}</span><br>
Solution 2:
Found the my question was lying around for long time. A simple change is javascript would do the trick and the nested json data could be extracted easily using the . notation like item.ValidationDate.$date in the example below in plunker.
http://plnkr.co/edit/NEBYrQeaLX84sCSNDCzV?p=preview
// Code goes here
// Code goes here
//http://stackoverflow.com/questions/18935889/difference-between-date-parse-and-gettime
var app = angular.module('tempfilter', []);
app.controller('MainCtrl', function($scope) {
$scope.sensordata = [
{id:'id:1',name:'Rob',"ValidationDate": {"$date":"2015-04-12 18:00:05-0400"},"readings" : [ {"Temp" : 20 }]},
{id:'id:2',name:'Rob',"ValidationDate": {"$date":"2015-04-13 18:00:05-0400"},"readings" : [ {"Temp" : 25 }]},
{id:'id:3',name:'Rob',"ValidationDate": {"$date":"2015-04-11 18:00:05-0400"},"readings" : [ {"Temp" : 26 }]}
];
$scope.filter = { value:100};
});
app.filter('tempo', function() {
return function( items, field, value) {
var filtered = [];
var newdate=new Date().setDate(new Date().getDate()-value);
//var tempp=26-value;
angular.forEach(items, function(item) {
//if (new Date(item[field]) > newdate){
//new logic of accessing value by function
//if (item.readings[0].Temp >tempp ){
if (new Date(item.ValidationDate.$date) >newdate ){
filtered.push(item);
}
});
return filtered;
};
});<!DOCTYPE html>
<html ng-app="tempfilter">
<head lang="en">
<meta charset="utf-8">
<title>DateFilter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
Number of days before today<input type="number" ng-model="filter.value">
<p id="demo">Showing data for last {{ filter.value }} days</p>
Filtered list:
<ul>
<li ng-repeat="s in sensordata | tempo:'Date':filter.value">{{s.id}}
{{s.ValidationDate.$date|date}}
{{s.name}}
{{s.readings[0].Temp}}
</ul>
Full List:
<ul>
<li ng-repeat="s in sensordata ">{{s.id}}
{{s.ValidationDate.$date|date}}
{{s.name}}
{{s.readings[0].Temp}}
</li>
</ul>
</body>
</html>
Post a Comment for "Can We Filter Nested Json Data Using Custom Filter In Angular Js"