Question

我试图通过用户输入过滤json对象。用户将从下拉列表中选择一个数字，然后我希望过滤我的数据并将其返回给他们（通过d3地图）。所以我想要做的事情很简单 - 但是我不太确定如何在javascript中做到这一点。

我有一个选择列表的更改功能，用户正在选择要过滤的数字，如下所示：

$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":"."}

地震是一系列物体。我希望通过数据及其各自的大小来过滤对象数组。因此，如果我收到5 - 我想过滤任何大小为5.x的东西，那么除此之外的任何东西都会从结果中过滤掉，保留原始结构。我可以使用lodash，我只是不太确定我会怎样，因为这对我来说是新的。非常感谢任何帮助！

这是我的第一次拍摄：

_.filter($scope.myData.earthquakes, function(item){
  return item.magnitude == data;
  });

这是不正确的。我希望恢复与开始时相同的结构 - 使用不符合过滤器标准的物品。

Answer 1

您对_.filter的调用并未过滤 on ，而是克隆它并返回克隆，但您不做任何操作。因此，您应该将已过滤的数组重新分配回$scope.myData.earthquakes。

以下是使用原生javascript的版本：

$scope.myData.earthquakes = $scope.myData.earthquakes.filter(function(eq) {
  return eq.magnitude === data;
});

Answer 2

您必须存储原始数组，然后对其进行过滤以进行克隆。否则你将丢失原始数据。

看看这个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对象

2 个答案: