Filtering json object by key value

Question

I am trying to filter a json object by a user input. The user will select a number out of a drop down then I wish to filter my data and return it to them (through a d3 map). So What I am looking to do is pretty simple I think - but I'm not too sure how to do it in javascript.

I have a change function for the select list where the user is selecting the number to filter by like so:

$scope.slideChange = function(data){
     //filter $scope.myData here by data

}

The json looks like so (with only one object inside earthquake, normally there are many more):

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

Where earthquakes is an array of objects. I wish to filter the array of objects by the data and their respective magnitude. So if I receive 5 - I would like to filter anything with the magnitude of 5.x, anything outside of that would be filtered out of the result, keeping the original structure . I can use lodash, I am just not too sure how I would as this is new to me. Would appreciate any help!

Here is my first shot:

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

This is incorrect. I am looking to get back the same structure as it started out with - with the items that don't meet the criteria of the filter taken out.

Answer 1

Your call to _.filter doesn't filter the array on place , but instead clones it and returns the clone, of which you do nothing. So you should rather reassign the filtered array back into $scope.myData.earthquakes .

Here is a version with native javascript:

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

Answer 2

You have to store the original array and then filter it making a clone. Otherwise you are going to lost the original data.

Take a look on this 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); 
            });
        }
    });
}]);