按键值筛选json对象

Filtering json object by key value

本文关键字：对象 json 筛选 键值      更新时间：2023-09-26

我正在尝试通过用户输入过滤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的东西，除此之外的任何东西都会被过滤掉，保持原始结构。我可以用洛达什，我只是不太确定我会怎么做，因为这对我来说是新的。如果有任何帮助，我将不胜感激！

这是我的第一枪：

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

这是不正确的。我希望恢复最初的结构——去掉不符合过滤器标准的项目。

您对_.filter的调用不会在位置上过滤数组，而是对其进行克隆并返回克隆，对此您什么也不做。因此，您应该将过滤后的数组重新分配回$scope.myData.earthquakes。

这是一个带有本地javascript的版本：

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

您必须存储原始数组，然后对其进行筛选以生成克隆。否则，您将丢失原始数据。

看看这个jsFiddlehttp://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); 
            });
        }
    });
}]);
相关文章：