在角JS使用自定义过滤器，我们可以过滤嵌套的JSON数据 [英] Can we filter nested json data using custom filter in angular js
问题描述
我是新来的角的js，并试图筛选嵌套的JSON数据（基本上我想显示日期为根据用户进入连日来）使用自定义过滤器的角JS。基本上我试图使用自定义filter.I我不知道我们是否可以用我现在的code滤波器嵌套的对象，如日期对象或我需要改变我的当前实现过滤日期对象的JSON。
我得到它的工作是这样的日期是字符串格式前，它工作得很好
http://plnkr.co/edit/5IhJYSXvqa5nwd87y8kD?p=$p$pview
但是当我试图嵌套JSON日期的格式也没有工作或JSON格式等读数我不能使它发挥作用。我试图找出一种方法使用自定义filter.Any帮助将AP preciated过滤嵌套的JSON对象（日期或其它参数数据）。
这里是一个plunker链接
http://plnkr.co/edit/en36loBKQ2DAnOcbwe8v?p=$p$pview`
VAR应用= angular.module（'tempfilter'，[]）;\r
\r
app.controller（'MainCtrl'，函数（$范围）{\r
$ scope.sensordata = [{\r
ID：ID：1，\r
名称：'抢'，\r
ValidationDate：{\r
$日期：2015年2月20日18：00：05-0400\r
}，\r
温度：42\r
\r
\r
\r
app.filter（'节奏'，函数（）{\r
返回功能（项目现场，价值）{\r
变种过滤= [];\r
\r
。VAR newdate =新的日期（）的setDate（新的Date（）GETDATE（） - 值。）;\r
\r
angular.forEach（项目功能（项目）{\r
如果（新会期（项目[现场]）GT; newdate）{\r
filtered.push（项目）;\r
}\r
}）;\r
返回过滤;\r
};\r
}）; \r
＆LT;机身NG控制器=MainCtrl＆GT;\r
今天之前的天数\r
＆LT;输入类型=数字NG-模式=filter.value＆GT;\r
＆LT; p n =演示＆GT;数据显示，去年{{filter.value}}天＆LT; / P＆GT;\r
过滤列表：\r
＆LT; UL＆GT;\r
＆LT;李NG重复=S在sensordata |节奏：'ValidationDate $日期：filter.value＆GT; {{} s.id} | {{S {{$ s.ValidationDate日期date}}。名}} {{s.Temp}}\r
＆LT; / UL＆GT;\r
＆LT; /身体GT; \r
`
找到了我的问题躺在周围很长一段时间。一个简单的变化是JavaScript的会做的伎俩和嵌套JSON数据可以用提取容易。符号像在plunker下面的例子item.ValidationDate。$日期。
http://plnkr.co/edit/NEBYrQeaLX84sCSNDCzV?p=$p$ PVIEW
// code到这里\r
\r
// code到这里\r
//http://stackoverflow.com/questions/18935889/difference-between-date-parse-and-gettime\r
\r
VAR应用= angular.module（'tempfilter'，[]）;\r
\r
app.controller（'MainCtrl'，函数（$范围）{\r
$ scope.sensordata = [\r
{ID：ID：1，名称：'抢'，ValidationDate：{$日期：2015年4月12日18：00：05-0400}，读：[{TEMP ：20}]}，\r
{ID：ID：2，名称：'抢'，ValidationDate：{$日期：2015年4月13日18：00：05-0400}，读：[{TEMP ：25}]}，\r
{ID：ID：3'，名称：'抢'，ValidationDate：{$日期：2015年4月11日18：00：05-0400}，读：[{TEMP ：26}]}\r
\r
];\r
\r
$ scope.filter = {值：100};\r
\r
}）;\r
\r
app.filter（'节奏'，函数（）{\r
返回功能（项目现场，价值）{\r
变种过滤= [];\r
\r
。VAR newdate =新的日期（）的setDate（新的Date（）GETDATE（） - 值。）;\r
// VAR tempp = 26值;\r
\r
angular.forEach（项目功能（项目）{\r
//如果（新会期（项目[现场]）GT; newdate）{\r
//通过函数获取价值的新逻辑\r
//如果（item.readings [0] .Temp＆GT; tempp）{\r
如果（新的日期（item.ValidationDate $日期）GT; newdate）{\r
\r
filtered.push（项目）;\r
}\r
}）;\r
返回过滤;\r
};\r
}）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=tempfilter＆GT;\r
\r
＆LT;头LANG =ENGT＆;\r
＆LT;间的charset =UTF-8＆GT;\r
＆LT;标题＆GT; DateFilter＆LT; /标题＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本＆GT;\r
文件撰写（'＆LT;基本href =+ document.location +'/＆GT;'）;\r
＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT; /头＆GT;\r
\r
＆LT;机身NG控制器=MainCtrl＆GT;\r
现今LT之前的天数;输入类型=数字NG-模式=filter.value＆GT;\r
＆LT; p n =演示＆GT;数据显示，去年{{filter.value}}天＆LT; / P＆GT;\r
过滤列表：\r
＆LT; UL＆GT;\r
＆LT;李NG重复=S在sensordata |节奏：日期：filter.value＆GT; {{s.id}}\r
{{$ s.ValidationDate日期|日期}}\r
{{s.name}}\r
{{s.readings [0] .Temp}}\r
＆LT; / UL＆GT;\r
\r
名单如下：\r
＆LT; UL＆GT;\r
＆LT;李NG重复=S在sensordata＆GT; {{s.id}}\r
{{$ s.ValidationDate日期|日期}}\r
{{s.name}}\r
{{s.readings [0] .Temp}}\r
＆LT; /李＆GT;\r
＆LT; / UL＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
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>
`
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>
这篇关于在角JS使用自定义过滤器，我们可以过滤嵌套的JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
