filter an array with multiple values on same key

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

To clarify your question: You want those array entries where at least one entry of the array search is in the embedded array ingredients of the object? — Philipp
– Philipp, Commented Nov 16, 2012 at 10:10
@ Philipp: yes, exactly: where at least one entry of the array search is in ingredients. — Andi Erni
– Andi Erni, Commented Nov 16, 2012 at 10:15
@ FAngel: this is part of what I was trying: var result = []; //var temp = []; //$.each(searcharray, function(index, value) { or for (var i=0; i<searcharray.length; i++) { result = rezepte.filter(function (rez) { return rez.zutaten == searcharray[i] }); } //}); //for (var i=0;i<searcharray.length;i++) { //temp = rezepte.filter(function (rez) { return rez.zutaten //searcharray[i].properties }); //result.push(temp); //} return result; — Andi Erni
– Andi Erni, Commented Nov 16, 2012 at 10:19
@FAngel currently no issue with undefined objects - I am not even there yet :-) See updated question. Thank you. — Andi Erni
– Andi Erni, Commented Nov 16, 2012 at 15:39

Bergi · Accepted Answer · 2012-11-16 10:09:17Z

3

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

answered Nov 16, 2012 at 10:09

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bergi Over a year ago

You don't get the alert because the function returns right before it. Notice that typeof [] is "object" because all javascript Arrays are objects, only for primitive values (strings, numbers, undefined...) you get other values. You can test whether an object is an array with isArray (cross-browser jQuery).

Andi Erni Over a year ago

appreciate your assistance. Have updated the question and deleted the comments. The ones to FAngel was referring to what I tried earlier (obsolete). There is no issue with undefined objetcs anymore. Current problem is that I would like to implement the $.grep() you showed me. Thx, Andi

Bergi Over a year ago

It seems good to me, but place the alert either before the for-loop or after the $.grep. If you don't get the correct search results, you also might adapt your searcharray creating, currently the words might contain whitespaces etc.

Viktor S. · Accepted Answer · 2012-11-16 16:35:44Z

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.

Great! Works perfectly in my jQuery project. Issue solved and learnd a lot from all of you guys. Thank you very much. Cheers, Andi

Collectives™ on Stack Overflow

filter an array with multiple values on same key

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related