按键值过滤 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); 
            });
        }
    });
}]);