Question

我正在尝试创建一个表，允许您过滤和排序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）;返回undefined和alert（filteredData [0]）;和alert（filteredData [0] .breed）;没有回报。任何关于这里发生的事情的帮助将不胜感激！

Answer 1

我在这里创造了你的榜样; https://jsfiddle.net/9xftex5o/3/没有A = ([[1,-2],\ [-2,1],\ [-5, -6], [4,7]]) negativesToZero(A) >>>> [[1, 0], [0, 1], [0, 0], [4, 7]]次调用，因为cat对象包含在$.getJSON()中。

用于呈现已过滤结果的代码可以正常工作，但却没有为更改事件设置过滤器功能。

过滤功能可以是;

data

挂钩事件;

function filterCats() {
    var criteria = document.getElementById('filter').value;
    var cats = data;
    var filteredData = cats.filter(function (c) {
        return c.breed === criteria;
    });
    renderData(filteredData);
};

Answer 2

导致此问题的原因是您的过滤器功能设置为完全匹配以返回。

如果您想使用包含或以条件开头进行过滤，则应更改过滤器，如下所示....

// case sensitive and start with
return c.breed.indexOf(criteria) === 0 ; 

// case sensitive and contains
return c.breed.indexOf(criteria) !== -1 ; 

// case insensitive and start with
return c.breed.toUpperCase().indexOf(criteria.toUpperCase()) === 0 ; 

// case insensitive and contains
return c.breed.toUpperCase().indexOf(criteria.toUpperCase()) !== -1 ;

这里有一个固定的jsfiddle http://jsfiddle.net/j92009zv/1/

HTML表上的.filter不返回任何数据 - JavaScript

2 个答案: