按键值过滤 json 个对象
Filtering json object by key value
我正在尝试通过用户输入过滤 json 对象。用户将从下拉列表中 select 一个数字,然后我希望过滤我的数据并将其 return 给他们(通过 d3 地图)。所以我想做的事情很简单 - 但我不太确定如何在 javascript.
中做到这一点
我有一个 select 列表的更改功能,其中用户正在 select 过滤号码,如下所示:
$scope.slideChange = function(data){
//filter $scope.myData here by data
}
json看起来像这样(地震里面只有一个物体,通常还有很多):
{"count":"349","earthquakes": [{"src":"us","eqid":"b0001mej","timedate":"2011-02-28 23:42:17","lat":"-29.4456","lon":"-112.0629","magnitude":"5.1","depth":"10.3","region":"."}
其中 earthquakes 是一个对象数组。我希望通过数据及其各自的大小来过滤对象数组。因此,如果我收到 5 - 我想过滤大小为 5.x 的任何内容,超出此范围的任何内容都会从结果中过滤掉,同时保留原始结构。我可以使用 lodash,我只是不太确定我会怎么做,因为这对我来说是新的。非常感谢任何帮助!
这是我的第一张照片:
_.filter($scope.myData.earthquakes, function(item){
return item.magnitude == data;
});
这是不正确的。我希望恢复与开始时相同的结构 - 不符合过滤器标准的项目已被删除。
您对 _.filter
的调用不会在 位置过滤数组 ,而是克隆它和 returns 克隆,您什么都不做.因此,您应该将过滤后的数组重新分配回 $scope.myData.earthquakes
.
这里是原生版本 javascript:
$scope.myData.earthquakes = $scope.myData.earthquakes.filter(function(eq) {
return eq.magnitude === data;
});
您必须存储原始数组,然后对其进行过滤以制作克隆。否则你将丢失原始数据。
看看这个 jsFiddle http://jsfiddle.net/o274tw43/3/
angular.module('test', [])
.controller('TestCtrl', ['$scope', function($scope) {
var data = {
"count": "349",
"earthquakes": [
{
"src": "us",
"eqid": "b0001mej",
"timedate": "2011-02-28 23:42:17",
"lat": "-29.4456",
"lon": "-112.0629",
"magnitude": "5.1",
"depth": "10.3",
"region": "."
},
{
"src": "us",
"eqid": "b0001mej",
"timedate": "2011-02-28 23:42:17",
"lat": "-29.4456",
"lon": "-112.0629",
"magnitude": "1.1",
"depth": "10.3",
"region": "."
},
{
"src": "us",
"eqid": "b0001mej",
"timedate": "2011-02-28 23:42:17",
"lat": "-29.4456",
"lon": "-112.0629",
"magnitude": "5.3",
"depth": "10.3",
"region": "."
},
{
"src": "us",
"eqid": "b0001mej",
"timedate": "2011-02-28 23:42:17",
"lat": "-29.4456",
"lon": "-112.0629",
"magnitude": "2.1",
"depth": "10.3",
"region": "."
}
]
};
$scope.filter = 'all';
$scope.myData = _.filter(data.earthquakes, function(item) {
item.magnitude = parseFloat(item.magnitude);
return item.magnitude >= 5 && item.magnitude < 6;
});
$scope.$watch('filter', function(value) {
$scope.myData = data.earthquakes;
if(value && !isNaN(value)) {
value = parseInt(value);
$scope.myData = _.filter(data.earthquakes, function(item) {
item.magnitude = parseFloat(item.magnitude);
return item.magnitude >= value && item.magnitude < (value + 1);
});
}
});
}]);
我正在尝试通过用户输入过滤 json 对象。用户将从下拉列表中 select 一个数字,然后我希望过滤我的数据并将其 return 给他们(通过 d3 地图)。所以我想做的事情很简单 - 但我不太确定如何在 javascript.
中做到这一点我有一个 select 列表的更改功能,其中用户正在 select 过滤号码,如下所示:
$scope.slideChange = function(data){
//filter $scope.myData here by data
}
json看起来像这样(地震里面只有一个物体,通常还有很多):
{"count":"349","earthquakes": [{"src":"us","eqid":"b0001mej","timedate":"2011-02-28 23:42:17","lat":"-29.4456","lon":"-112.0629","magnitude":"5.1","depth":"10.3","region":"."}
其中 earthquakes 是一个对象数组。我希望通过数据及其各自的大小来过滤对象数组。因此,如果我收到 5 - 我想过滤大小为 5.x 的任何内容,超出此范围的任何内容都会从结果中过滤掉,同时保留原始结构。我可以使用 lodash,我只是不太确定我会怎么做,因为这对我来说是新的。非常感谢任何帮助!
这是我的第一张照片:
_.filter($scope.myData.earthquakes, function(item){
return item.magnitude == data;
});
这是不正确的。我希望恢复与开始时相同的结构 - 不符合过滤器标准的项目已被删除。
您对 _.filter
的调用不会在 位置过滤数组 ,而是克隆它和 returns 克隆,您什么都不做.因此,您应该将过滤后的数组重新分配回 $scope.myData.earthquakes
.
这里是原生版本 javascript:
$scope.myData.earthquakes = $scope.myData.earthquakes.filter(function(eq) {
return eq.magnitude === data;
});
您必须存储原始数组,然后对其进行过滤以制作克隆。否则你将丢失原始数据。
看看这个 jsFiddle http://jsfiddle.net/o274tw43/3/
angular.module('test', [])
.controller('TestCtrl', ['$scope', function($scope) {
var data = {
"count": "349",
"earthquakes": [
{
"src": "us",
"eqid": "b0001mej",
"timedate": "2011-02-28 23:42:17",
"lat": "-29.4456",
"lon": "-112.0629",
"magnitude": "5.1",
"depth": "10.3",
"region": "."
},
{
"src": "us",
"eqid": "b0001mej",
"timedate": "2011-02-28 23:42:17",
"lat": "-29.4456",
"lon": "-112.0629",
"magnitude": "1.1",
"depth": "10.3",
"region": "."
},
{
"src": "us",
"eqid": "b0001mej",
"timedate": "2011-02-28 23:42:17",
"lat": "-29.4456",
"lon": "-112.0629",
"magnitude": "5.3",
"depth": "10.3",
"region": "."
},
{
"src": "us",
"eqid": "b0001mej",
"timedate": "2011-02-28 23:42:17",
"lat": "-29.4456",
"lon": "-112.0629",
"magnitude": "2.1",
"depth": "10.3",
"region": "."
}
]
};
$scope.filter = 'all';
$scope.myData = _.filter(data.earthquakes, function(item) {
item.magnitude = parseFloat(item.magnitude);
return item.magnitude >= 5 && item.magnitude < 6;
});
$scope.$watch('filter', function(value) {
$scope.myData = data.earthquakes;
if(value && !isNaN(value)) {
value = parseInt(value);
$scope.myData = _.filter(data.earthquakes, function(item) {
item.magnitude = parseFloat(item.magnitude);
return item.magnitude >= value && item.magnitude < (value + 1);
});
}
});
}]);