Filter an array with multiple values ​​on the same key

Question

I am trying to dynamically generate a list in jQuery. This works fine for the whole list, but now I need to filter / search / reduce my source 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 the “recipe” with a search search, for example 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 tried a lot of things in the for: filter, map, push loop - but all without success always repeat in undefined objects.

I'm also not sure what syntax should be my array of recipes: there should be the possibility of a variable amount of "ingredients".

Any help and hint would be most appreciated.

Thanks a lot Andy

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 work with this code. See Demo: http://jsfiddle.net/VcZtE/1/ (results can be seen in the browser console). The only difference from your code: if ($.inArray(searcharray[i], rezept.zutaten) != -1) . According to docs for inArray needles should be the first parameter and an array to search second. And you have it in the opposite direction: the array is passed as the first parameter and the needle (value to search) in seconds.

Answer 2

Using native array functions, this should work:

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

Using jQuery, it will be

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