How do I compare two arrays and print the total data along with a checked box and odd data if the box is not checked?
I have two arrays var arr1 = ["apple", "banana", "grapes", "orange", "kiwi", "guava"]; var arr2 = ["apple", "orange", "kiwi"]; Now I want to compare two arrays and print "apple", "orange", "kiwi", i.e. Common words between the two arrays along with a checked checkbox, and the remaining checkboxed words are unchecked. I can retrieve and display common items, but not unusual items, with the 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>
source to share
create a function to check if the current value exists in another array, and if it checks for it, don't check yet.
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>
source to share
You could do it this way, but it depends on your requirements.
Basically you are using one loop rather than two if arr1 exists in arr2 then check, uncheck again.
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 the ugly version, you can use a splice to remove it and then you're left with something that 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 will arrange for checking and unchecking. Thus, the checked boxes can be placed separately to uncheck the box. Again, it depends on the requirements.
source to share
Instead of using 2 loops directly, you can use indexOf to check if an array element in the second array is the same
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;
}
source to share
You can merge
them like this and then display the items by checking the arraycommon
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>
source to share