jQuery compare two arrays?

Question

I have an array and I would like to create another new array and the values are extracted from the HTML itself, then I would like to compare both the values and output the match value.

My existing array to compare:

var designersArrSelected = ["Von Blan","Foo Can","Diane con Fursternberg","BCBG MAX Azria"];

My HTML

<ul id="seasonsDropDown">
  <li data-season="FALL 2013 HAUTE COUTURE">FALL 2013 HAUTE COUTURE
    <ul class="designers">
      <li data-designer="Alexander Wang">Alexander Wang</li>
      <li data-designer="BCBG MAX Azria">BCBG MAX Azria</li>
      <li data-designer="Diane con Fursternberg">Diane con Fursternberg</li>
      <li data-designer="Diane Von De">Diane Von De</li>
    </ul>
 </li>
</ul>

To grab the all designer's names from the HTML I've used:

var designersArrAll = [];
var i = 0;


$(".designers>li").each(function(){
    designersArrAll[i++] = $(this).attr("data-designer");
});

Base on my example the outcome should select "Diane con Fursternberg" and "BCBG MAX Azria since there are two matches, but how should I compare both the arrays for the same values?

Here is the pen: http://codepen.io/vincentccw/pen/eDrox

score 1 · Answer 1 · answered Nov 16 '13 at 19:53

Try with $.inArray. You may use it like here:

var found = $.inArray('pattern', stringToBeSearched) > -1;

The result with be a number indicating where in your string begins a pattern you are looking for. -1 will let you know that there is no such a pattern in the stringToBeSearched.

score 1 · Accepted Answer · edited May 23 '17 at 12:19

If you want to do it the old-fashioned for loop way, here's some code i picked up here: How do I check if an array includes an object in JavaScript?. An if conditional inside each, you could style elements while matches are hit. Probably not the most efficient, but it works.

fiddle: http://jsfiddle.net/LmQ9U/

    var designersArrAll = [];
    var designersArrSelected = ["Von Blan","Foo Can","Diane con Fursternberg","BCBG MAX Azria"];
     var i = 0;


     $(".designers>li").each(function(){
         designersArrAll[i++] = $(this).attr("data-designer");
     });

    $(".designers>li").each(function(){
        designer = $(this).attr("data-designer");
        designersArrAll[i++] = designer;           
        if ( contains( designersArrSelected , designer) ) {
            // do something here
            $(this).css('background', 'yellow');
        }
    });
    function contains(a, obj) {
        for (var i = 0; i < a.length; i++) {
                if (a[i] === obj) {
                    return true;
                }
            }
            return false;

i've noticed you add designersArrAll[i++] = designer; in the each function, any reason for that? — Vincent Chua, Nov 16 '13 at 20:56
Just thought it was easier to read. seeing all those brackets in the if statement was making me dizzy. — Geomatic, Nov 16 '13 at 23:29

score 1 · Answer 3 · edited May 23 '17 at 10:31

1

You can do this instead of the loop you have to make the designersArrAll array.

var designersArrAll = $.map( $('.designers > li'), function(el){
  return $(el).data('designer');
});

As for comparing two arrays you can use the code on this question: How to know if two arrays have the same values

edited May 23 '17 at 10:31

Community

1
1

answered Nov 16 '13 at 20:28

Bill Criswell

32,161
7
75
66

jQuery compare two arrays?

3 Answers3