我们可以在angular js中使用自定义过滤器过滤嵌套的json数据吗 [英] Can we filter nested json data using custom filter in angular js
问题描述
我是 angular js 的新手，正在尝试使用自定义过滤器在 angular js 中过滤嵌套的 json 数据(基本上我想根据用户输入显示过去几天的日期).基本上我正在尝试使用自定义过滤器过滤 json 中的日期对象.我不确定我们是否可以使用我当前的代码过滤像日期对象这样的嵌套对象，或者我可能需要更改我当前的实现.
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.
我以前在日期为字符串格式时就这样工作过并且工作正常http://plnkr.co/edit/5IhJYSXvqa5nwd87y8kD?p=preview
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
但是当我尝试使用嵌套的 json 日期格式时，它不起作用或其他 json 格式的读数我无法使它起作用.我试图找出一种使用自定义过滤器过滤嵌套 json 对象(数据中的日期或其他参数)的方法.任何帮助将不胜感激.这是一个plunker链接http://plnkr.co/edit/en36loBKQ2DAnOcbwe8v?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>`
推荐答案
发现我的问题已经存在很长时间了.一个简单的变化是 javascript 可以解决问题，并且可以使用 .js 文件轻松提取嵌套的 json 数据.像下面示例中的 item.ValidationDate.$date 在 plunker 中这样的符号.
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>这篇关于我们可以在angular js中使用自定义过滤器过滤嵌套的json数据吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
