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. Basically I am trying to filter date object in json using custom filter.I am not sure whether we can filter nested object like date object using my current code or i may need to change my current implementation.

I got it working like this before when the date was in string format and it worked fine http://plnkr.co/edit/5IhJYSXvqa5nwd87y8kD?p=preview

But when i tried nested json date format it did not work or other readings in json format i could not make it work. I am trying to figure out a way to filter nested json object(date or other parameters in the data) using the custom filter.Any help would be appreciated. Here is a plunker link that http://plnkr.co/edit/en36loBKQ2DAnOcbwe8v?p=preview`

var app = angular.module('tempfilter', []);

app.controller('MainCtrl', function($scope) {
  $scope.sensordata = [{
    id: 'id:1',
    name: 'Rob',
    "ValidationDate": {
      "$date": "2015-02-20 18:00:05-0400"
    },
    "Temp": 42
    
    
    
    app.filter('tempo', function() {
  return function(items, field, value) {
    var filtered = [];

    var newdate = new Date().setDate(new Date().getDate() - value);

    angular.forEach(items, function(item) {
      if (new Date(item[field]) > newdate) {
        filtered.push(item);
      }
    });
    return filtered;
  };
});

<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:'ValidationDate.$date':filter.value">{{s.id}} {{s.ValidationDate.$date|date}} {{s.name}} {{s.Temp}}
  </ul>
</body>

回答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>

回答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>

来源：https://stackoverflow.com/questions/29591051/can-we-filter-nested-json-data-using-custom-filter-in-angular-js

标签

javascript

json

angularjs

angularjs-ng-repeat

angularjs-filter