3

I have two arrays var arr1=["apple", "banana", "grapes", "orange", "kiwi", "guava"]; var arr2=["apple", "orange", "kiwi"]; Now I want to compare the two arrays and print "apple", "orange", "kiwi", i.e., the common words between two arrays along with checkbox checked, and the remaining words with checkbox unchecked. I am able to retrieve and display the common elements but not the uncommon elements, with checkbox unchecked. Please help.

function displayList()
{
 var arr1=["apple", "banana", "grapes", "orange", "kiwi", "guava"];
 var arr2=["apple", "orange", "kiwi"];
 var arrData;
 var output="";
 
for (var i = 0; i < arr1.length; i++) {
    for (var j = 0; j < arr2.length; j++) {
  if ( arr1[i]== arr2[i])
  {
  arrData=arr2[j];
        output+= '<input type="checkbox" value='+arrData+' name="box2" checked >'  + '   ' + arrData+'   '+'<br><br>'; 
  document.getElementById("demo2").innerHTML=output;
  }
    }
}
}
<button onClick="displayList()">click me</button>
<div id="demo"></div>
<div id="demo2"></div>
Poppins
  • 141
  • 1
  • 4
  • 12

4 Answers4

1

You could potentially do it in this manner, but it depends on your requirements.

Basically you use one loop rather than two, if element of arr1 exists in arr2 then check, else uncheck.

document.getElementById("clickMe").onclick = displayList;
function displayList() {
  var arr1 = ["apple", "banana", "grapes", "orange", "kiwi", "guava"];
  var arr2 = ["apple", "orange", "kiwi"];
  var arrData;
  var output = "";

  for (var i = 0; i < arr1.length; i++) {
      if (arr2.contains(arr1[i])) {
        arrData = arr1[i];
        output += '<input type="checkbox" value=' + arrData + ' name="box2" checked >' + '   ' + arrData + '   ' + '<br><br>';
        document.getElementById("demo2").innerHTML = output;
      }
      else{
        arrData = arr1[i];
        output += '<input type="checkbox" value=' + arrData + ' name="box2" >' + '   ' + arrData + '   ' + '<br><br>';
        document.getElementById("demo2").innerHTML = output;
      }
    }
}

Array.prototype.contains = function(element){
    return this.indexOf(element) > -1;
};
<button id="clickMe">click me</button>
<div id="demo"></div>
<div id="demo2"></div>

Here's an uglier version, you can use splice to remove it, and then you will remain with what doesn't exist.

document.getElementById("clickMe").onclick = displayList;

function displayList() {
  var arr1 = ["apple", "banana", "grapes", "orange", "kiwi", "guava"];
  var arr2 = ["apple", "orange", "kiwi"];
  var arrData;
  var output = "";

  for (var i = 0; i < arr1.length; i++) {
    for (var j = 0; j < arr2.length; j++) {
    
      if (arr1[i] === arr2[j]) {
        arrData = arr1[i];
        output += '<input type="checkbox" value=' + arrData + ' name="box2" checked >' + '   ' + arrData + '   ' + '<br><br>';
        document.getElementById("demo2").innerHTML = output;
        arr1.splice(i,1);
      }
      
    }
  }
  for (var x = 0;x <=arr1.length-1;x++){
   arrData = arr1[x];
   output += '<input type="checkbox" value=' + arrData + ' name="box2" >' + '   ' + arrData + '   ' + '<br><br>';
        document.getElementById("demo2").innerHTML = output;
  }
  
}
<button id="clickMe">click me</button>
<div id="demo"></div>
<div id="demo2"></div>

In this version you can keep your nested loop, and it organizes checked and unchecked. In this manner, the checked checkboxes can be placed separately to unchecked. Once again, it depends on requirements.

almost a beginner
  • 1,622
  • 2
  • 20
  • 41
0

create a function to check if the current value exists in the other array, and if it does check it else don't check.

function inArray(item, array) {
        for (var i in array) {
            if (array[i] === item)
                return true;
        }
        return false;
    }

function displayList() {
        var arr1 = ["apple", "banana", "grapes", "orange", "kiwi", "guava"];
        var arr2 = ["apple", "orange", "kiwi"];
        var arrData;
        var output = "";

        for (var i = 0; i < arr1.length; i++) {
            if (inArray(arr1[i], arr2)) {
                arrData = arr1[i];
                output += '<input type="checkbox" value=' + arrData + ' name="box2" checked >' + '   ' + arrData + '   ' + '<br><br>';
                document.getElementById("demo2").innerHTML = output;
            } else {
                arrData = arr1[i];
                output += '<input type="checkbox" value=' + arrData + ' name="box2" >' + '   ' + arrData + '   ' + '<br><br>';
                document.getElementById("demo2").innerHTML = output;
            }
        }
    }
<button onClick="displayList()">click me</button>
<div id="demo"></div>
<div id="demo2"></div>
Junius L
  • 15,881
  • 6
  • 52
  • 96
0

Instead of using 2 loops directly, you can use indexOf to check if the array element matches in the 2nd array

for (var i = 0; i < arr1.length; i++) {
    if(arr2.indexOf(arr[i]) > -1) {
        arrData=arr2[j];
        output+= '<input type="checkbox" value='+arrData+' name="box2" checked >' + ' ' + arrData+' '+'<br><br>';
    } else {
        arrData=arr2[j];
        output+= '<input type="checkbox" value='+arrData+' name="box2" >' + ' ' + arrData+' '+'<br><br>';
    }
    document.getElementById("demo2").innerHTML=output;
}
gaganshera
  • 2,629
  • 1
  • 14
  • 21
0

You can merge them like this and then display the items by checking the common array

function displayList()
{
 var arr1=["apple", "banana", "grapes", "orange", "kiwi", "guava"];
 var arr2=["apple", "orange", "kiwi"];
 var arrData,common={},output="";
  
  //ref : http://stackoverflow.com/a/1584377/7549867
    function arrayUnique(array) {
    var a = array.concat();
    for(var i=0; i<a.length; ++i) {
        for(var j=i+1; j<a.length; ++j) {
           if(a[i] === a[j]){
              common[a[i]]='true'
              a.splice(j--, 1);
           }
        }
    }
    return a;
}

    // Merges both arrays and gets unique items
arrData = arrayUnique(arr1.concat(arr2));

  var length = arrData.length;
  for(var i= 0 ; i<length ;i++){
     var checked = (common[arrData[i]])?'checked':''
     output+= '<input type="checkbox" value='+arrData+' name="box2" '+checked+ '>'  + '   ' + arrData[i]+'   '+'<br><br>'; 
  document.getElementById("demo2").innerHTML=output;
 
    }
}
<button onClick="displayList()">click me</button>
<div id="demo"></div>
<div id="demo2"></div>
Gaurav Chaudhary
  • 1,491
  • 13
  • 28