Question

我尝试在jQuery中动态生成listview。这适用于整个列表，但现在我需要过滤/搜索/减少我的初始数据：

var rezepte = [
{ "name" : "Eierkopf" , "zutaten" : ["Eier", "Zucker"] , "zubereitung" : "alles schön mischen." },
{ "name" : "Käseschnitte" , "zutaten" : ["Käse", "Brot", "Paprika"] , "zubereitung" : "Käse drauf und in den Ofen" },
{ "nme" : "Gemüse-Auflauf" , "zutaten" : ["Lauch"] , "zubereitung" : "1. schneiden 2. Kochen 3. essen" }
];

我想通过像var searcharray = ["Zucker", "Paprika"]之类的搜索来过滤/搜索“食谱”，从而导致：

var result = [
{ "name" : "Eierkopf" , "zutaten" : ["Eier", "Zucker"] , "zubereitung" : "alles schön mischen." },
{ "name" : "Käseschnitte" , "Zutaten" : ["Käse", "Brot", "Paprika"] , "zubereitung" : "Käse drauf und in den Ofen" }];

我在for循环中尝试了很多东西：filter，map，push - 但是没有成功的东西总是会导致未定义的对象。

我也不确定我的配方阵列应该是什么语法：必须有可变数量的“成分”。

任何帮助和提示都将非常受欢迎。

非常感谢，安迪

Answer 1

使用本机数组函数，这应该有效：

result = recipes.filter(function(recipe) {
    return search.any(function(ingredient) {
        return recipe.ingredients.indexOf(ingredient) != -1;
    });
});

使用jQuery，它将是

result = $.grep(recipes, function(recipe) {
    for (var i=0; i<search.length; i++)
        if ($.inArray(recipe.ingredients, search[i]) != -1)
            return true;
    return false;
});

Answer 2

var rezepte = [
{ "name" : "Eierkopf" , "zutaten" : ["Eier", "Zucker"] , "zubereitung" : "alles schön mischen." },
{ "name" : "Käseschnitte" , "zutaten" : ["Käse", "Brot", "Paprika"] , "zubereitung" : "Käse drauf und in den Ofen" },
{ "nme" : "Gemüse-Auflauf" , "zutaten" : ["Lauch"] , "zubereitung" : "1. schneiden 2. Kochen 3. essen" }
];

function search() {
    var search = $("#searchfield").val(); // returns string
    var searcharray = search.split(',');
    if (searcharray == "") {
        check = $.isArray(searcharray);
        alert(check); // true
        return rezepte;
    } else { 
        var result = [];
        alert("till here fine");
        result = $.grep(rezepte, function(rezept) {
            for (var i=0; i<searcharray.length; i++) {
                if ($.inArray(searcharray[i], rezept.zutaten) != -1)
                    return true;
            } 
             return false;
        });
    }
    console.log(result);
    return result;  
}
$(function(){
     $("#search").click(search);
})

我使用此代码。请参阅演示：http://jsfiddle.net/VcZtE/1/（结果可以在浏览器控制台中看到）。与您的代码的唯一区别在于：if ($.inArray(searcharray[i], rezept.zutaten) != -1)。根据{{1}} inArray针，应该是第一个参数和数组搜索 - 秒。你有相反的方式：数组作为第一个param和needle（要搜索的值）作为第二个传递。

过滤在同一个键上具有多个值的数组

2 个答案: