.filter在HTML表上不返回数据- JavaScript

我正在尝试创建一个表，允许您过滤和排序cats.json中包含的JSON数据:

[{
                "breed" : "Abyssinian",
                "country" : "Ethiopia",
                "coffeePreference" : "espresso",
                "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Gustav_chocolate.jpg/100px-Gustav_chocolate.jpg"
            }, {
                "breed" : "Aegean",
                "country" : "Greece",
                "coffeePreference" : "medium roast, cream and sugar",
                "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Aegean_cat.jpg/100px-Aegean_cat.jpg"
}]

我能够用以下方法对数据进行排序。基本上，我已经小心地嵌套了一系列回调函数。下面的代码展示了我是如何成功排序和渲染的。

function renderData(cats){
        var output='<table id="indextable" border="1" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">';
        output+="<thead>"
        output+="<tr>";
        output+="<th> HeadShot </th>";
        output+="<th><button onclick='getSortedBreedData()'>Breed</button></th>";
        output+="<th><button onclick='getSortedCountryData()'>Country</button></th>";
        output+="<th><button onclick='getSortedCoffeeData()'>CoffeePreference</button></th>";
        output+="</tr>";
        output+="</thead>"
    for (var i in cats) {
        output+="<tbody>" 
        output+="<tr>";
        output+="<td><img src='" + cats[i].picture+"' alt='missing cat picture'></td>"
        output+="<td>" + cats[i].breed + "</td>"
        output+="<td>" + cats[i].country + "</td>"
        output+="<td>" + cats[i].coffeePreference + "</td>"
        output+="</tr>";
        output+="</tbody>" 
    }
    output+="</table>";
    document.getElementById("catTable").innerHTML=output;
}            

function getData(){       
    $.getJSON('cats.json', function(cats) {
        var cats = cats;
        renderData(cats);    
    });
}    

var sortCountry;
function getSortedCountryData(){       
    $.getJSON('cats.json', function(cats) {
        var cats = cats;
        if (sortCountry!=true)
            sortData(cats,'country',1);
        else 
            sortData(cats,'country',-1);
        sortCountry ^= true;   
    });
}
var sortBreed;    
function getSortedBreedData(){       
    $.getJSON('cats.json', function(cats) {
        var cats = cats;
        if (sortBreed!=true)
            sortData(cats,'breed',1);
        else 
            sortData(cats,'breed',-1);
        sortBreed ^= true;   
    });
}
var sortCoffee;    
function getSortedCoffeeData(){       
    $.getJSON('cats.json', function(cats) {
        var cats = cats;
        if (sortCoffee!=true)
            sortData(cats,'coffeePreference',1);
        else 
            sortData(cats,'coffeePreference',-1);
        sortCoffee ^= true;   
    });
}
function sortData(cats, element, direction){
    switch(element) {
        case 'breed':
            var sortedData = cats.sort(function(a,b){return (a.breed < b.breed) ? -1*direction : 1*direction;});
            renderData(cats);
            break;
        case 'country':
            var sortedData = cats.sort(function(a,b){return (a.country < b.country) ? -1*direction : 1*direction;});
            renderData(cats);
            break;
        case 'coffeePreference':
            var sortedData = cats.sort(function(a,b){return (a.coffeePreference < b.coffeePreference) ? -1*direction : 1*direction;});
            renderData(cats);
        default:
            renderData(cats);
    }
}

问题在于过滤。我基本上是在尝试类似的方法。在HTML中，我有一个字段，其中输入的数据被捕获。我确信这是正常发生的。

                    <label for="filter">Filter</label>
                    <input type="text" name="filter" value="" id="filter" onchange="filterCats()" />

一旦数据被捕获:

    function filterCats(){
                    $.getJSON('cats.json', function(cats) {
                    var cats = cats;    
                    var criteria = document.getElementById('filter').value;
                    filterCats2(cats, criteria);
                    });                              
            }

            function filterCats2(cats, criteria){
                var filteredData = cats.filter(function(c){return c.breed === criteria;});
                renderData(filteredData);
            }

这将呈现一个空表。表头是所有出现的内容。我也试过alert(filteredData);alert(filteredData[0])返回undefined;和警报(filteredData [0] .breed);返回什么。对于这里正在发生的事情，任何帮助都将非常感激!