Question

I try to dynamically generate a listview in jQuery. This works perfectly for the whole list, but now I need to filter/search/reduce my initial data:

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" }
];

I would like to filter/search “recipe” by a searcharray like var searcharray = ["Zucker", "Paprika"] resulting in:

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" }];

I have tried a lot of things within the for loop: filter, map, push – but all without sucess always resuling in undefined objects.

I am also not sure what syntax my recipe Array should be: there must be the possibility of variable amount of “ingredients”.

Any help and hint would be most appreciated.

Thanks a lot,
Andi

Answer 1

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);
})

I have it working with this code. See demo: http://jsfiddle.net/VcZtE/1/ (results could be seen in browser console). The only difference from your code is here: if ($.inArray(searcharray[i], rezept.zutaten) != -1). According to docs for inArray needle should be a first parameter and array to search in – second. And you have it in opposite way: array is passed as a first param and needle (value to search for) as a second.