jQuery / javascript find values within a list

Question

I have a peculiar issue I'm dealing with. I'll start off vague and if anyone needs more detail I can give background on the project.

I have a selected ID (selected from a checkbox): 161

And I have many rows of IDs like so:

["161", "165", "573", "190", "150", "283"] // this one would be it
["160", "311", "793", "309", "301"]
["161", "165", "395", "306"] // this one would be it
["160", "311", "668", "191", "216", "301"]

I need to identify out of the rows of IDs above, which ones have the ID that has been selected. This isn't so difficult, I can loop through each row of IDs (looping through the actual array) and do thisIDList[i] == selectedID.

Problem I'm having is when more than one ID has been selected: ["161", "306"]

Now I need to loop through the rows and identify which rows has both of the selected IDs.

["161", "165", "573", "190", "150", "283"] // wouldn't be it
["160", "311", "793", "309", "301"]
["161", "165", "395", "306"] // this one would be it
["160", "311", "668", "191", "216", "301"]

And so on. There can be anywhere from 1 to 5 or 6 IDs selected: ["161", "306", "216", "668"]

Can someone point me in the right direction? I think this is basically like comparing two lists where each item in List A needs to found in List B.

edit

I should add that the row can contain other IDs not found in the selected list. So if the selected IDs was ["161", "306"], then ["161", "165", "395", "306"] would be a match still, even though it contains 165 and 395.

edit

Going to update and give a bit more info. I have a list of radio buttons:

<input type="checkbox" name="filter" value="301" />
<input type="checkbox" name="filter" value="161" />
<input type="checkbox" name="filter" value="573" />
<input type="checkbox" name="filter" value="190" />

I have an unordered list, each list has a data attribute (I'm using the metadata plugin):

<ul>
    <li data="{attrID: '160,197,161,194,195,190,162' }">Lorem Ipsum</li>
</ul>

When a radio button is clicked:

// set the selected IDs
selectedIds = []; 
$("input[name=filter]:checked").each(function(){ 
     selectedIds.push(this.value);
});

// loop through each list                   
$('ul li').each(function () {  

    // get and set the metadata for the attrID key
    meta = $(this).metadata();
    idList = meta.attrID;   

    // find out if the selected IDs are found in this idList
    var isMatch = matches(selectedIds,idList);

    console.log(isMatch);

    // my plan was to do this
    if(isMatch){
        // do something with this list item
    }


});

tvanfosson · Accepted Answer · 2010-12-01 21:16:04Z

3

This uses the inArray function from jQuery. It returns an array containing the indices of the sets that contain all elements of the target set. If your sets are relatively small, as in your example, it should be fast enough.

function matches( target, sets )
{
    var matches= [];
    for (var i = 0, setsLen = sets.length; i < setsLen; ++i ) {
        if (isSubset(target,sets[i])) {
           matches.push(i);
        }
    }
    return matches;
}

function isSubset( target, set )
{
    for (var j = 0, targetLen = target.length; j < targetLen; ++j) {
         if ($.inArray(target[j], set) < 0) {
             return false;
         }
    }
    return true;
}

A little test script based on your data:

$(function(){
    var sets = [
                  ["161", "165", "573", "190", "150", "283"],
                  ["160", "311", "793", "309", "301"],
                  ["161", "165", "395", "306"],
                  ["160", "311", "668", "191", "216", "301"]
    ];

    alert( matches( [ "161" ], sets ) );
    alert( matches( [ "161","306" ], sets ) );
 });

EDIT: I updated my example based on your additions. I think you'd only need to use the isSubset function. I'll leave the rest of the answer for context.

edited Dec 1, 2010 at 21:16

answered Dec 1, 2010 at 19:51

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

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

10 Comments

jyoseph Over a year ago

Thanks! What would be the best way to implement this? Currently I am doing var isMatch = matches(selectedIds,idList); and then outputting that to the console. It returns either [0] which I am guessing means no match. It also returns either [0, 1] or [0, 1, 2] which is odd because there's only one match.

Eric Over a year ago

I'd be wary about using the same name for a function as you do for a variable within it

jyoseph Over a year ago

Here's the raw output of what I got from firebug. pastebin.com/raw.php?i=9py2Yn2v

tvanfosson Over a year ago

@jyoseph -- typo, the index in the inner loop is j, not i. I've fixed it.

tvanfosson Over a year ago

@Eric - fair enough, but I have scoped the variable local to the function so there shouldn't be any collision.

|

jd. · Accepted Answer · 2010-12-01 20:57:53Z

2

The fastest and most re-usable way of doing this is to create an isSubset function. You don't even depend on jQuery!

function isSubset(largeSet, smallSet){

    for(var i=0; i<smallSet.length; i++){
        if(largeSet.indexOf(smallSet[i]) == -1){
            //not found.
            return false;
        }
    }

    return true;
}

Now iterate over all your ID list arrays and pass in your selected ID array:

isSubset(idList, selectedIds);

If the above returns true, you have identified a valid list !

=============

Edit: thanks to Eric, for pointing out a vulnerability with indexOf().

The following code should resolve that problem on all browsers:

if (!Array.indexOf) {
  Array.prototype.indexOf = function (obj, start) {
    for (var i = (start || 0); i < this.length; i++) {
      if (this[i] == obj) {
        return i;
      }
    }
    return -1;
  }
}

edited Dec 1, 2010 at 20:57

answered Dec 1, 2010 at 19:51

jd.

4,0967 gold badges40 silver badges45 bronze badges

1 Comment

Eric Over a year ago

Be wary of support for Array.indexOf() in IE...

Emmett · Accepted Answer · 2010-12-01 19:40:12Z

0

If you started by sorting each array, you'd only have to traverse each list once.

answered Dec 1, 2010 at 19:40

Emmett

14.4k12 gold badges58 silver badges82 bronze badges

Comments

brett · Accepted Answer · 2010-12-01 19:41:29Z

0

How about incrementing a variable when one of X id's have been found, and matching it against total selected Id's when it reaches the end. If 4 of 4 have been found, there is a match

answered Dec 1, 2010 at 19:41

brett

1914 bronze badges

Collectives™ on Stack Overflow

jQuery / javascript find values within a list

4 Answers 4

10 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related