Why cannot access json?

Question

 function loadResponse(filter) {
     $.ajax({
         type: 'GET',
         url: 'path/to/example.json',
         dataType: 'json',
         cache: false,
         beforeSend: function () {
             console.log('loading');
         },
         success: function (response) {
             //console.log('success, filtering response..');

             var filtered = $(response).filter(function (i, n) {
                 return n.type === filter; //not working
             });
             console.log('filter by json ' + filtered);

             for (var key in filtered) {
                 if (filtered.hasOwnProperty(key)) {
                     console.log('list ' + filtered[key]["description"]);
                     console.log('list ' + filtered[key]["name"]);

                 }
             }
         }
     });
 }

The console.log kept giving undefined for the description or name. But however I tested without:

var filtered = $(response).filter(function (i,n) {
    return n.type === filter; //not working
});

Able to get description and name in console.log. Seems like $(response).filter does not return somthing. not sure where it went wrong.

Update

See JSON -- response is supposed to print out name and type. so need to filter type inside json

[
    {
      "name": "Jonathan Suh",
      "type": "zoologist, hobbyist"
    },
    {
      "name": "William Philbin",
      "type": "judge, hobbyist"
    },
    {
      "name": "Allison McKinnery",
      "type": "hobbyist"
    }
  ];



   $('.filter a').on('click', function(e){
        e.preventDefault();
        loadResponse($(this).attr('id'));
      });

Example:

<a href='#' id="hobbyist">Hobbyist</a>

So click on this above, it should give me list of 3 people who are hobbyists.

Answer 1

According to the API filter will:

Reduce the set of matched elements to those that match the selector or pass the function's test.

(emphasis mine)

I think it works on DOM elements not JSON objects

You can try using jquery.grep()

UPDATED

Sample using grep() -> See console for outputs when clicking

$(function() {
  var arr = [{
    "name": "Jonathan Suh",
    "type": "zoologist, hobbyist"
  }, {
    "name": "William Philbin",
    "type": "judge, hobbyist"
  }, {
    "name": "Allison McKinnery",
    "type": "hobbyist"
  }];

  var doFilter = function(arr, filterParam) {
    return jQuery.grep(arr, function(n, i) {
      console.log(n.type.indexOf(filterParam));
      return (n.type.indexOf(filterParam) > -1);
    });
  };


  $(".filter").on('click', function() {
    var filterName = $(this).attr('id');
    console.log(filterName);
    if (filterName) {
      var filteredResults = doFilter(arr, filterName);

      console.log(filteredResults);

    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>See console for outputs when clicking</h3>
<a href='#' class="filter" id="hobbyist">Hobbyist</a>
<br/>
<a href='#' class="filter" id="judge">Judge</a>