Filter data in input fields. Javascript array comparsion?

Question

I've got three input fields and a button. Into the fields only numbers, and commas can be typed. The result must be the numbers which are exactly occuring twice, in all the three fields. For example.

num_array1 = [1,2,3];
num_array2 = [1,2,3,4];
num_array3 = [1,5,6];

According to this example, the result should be: 2,3 The real trouble is the number "1", because all the arrays have it. With a simple embedded for cycle I can't do it, so I hope you can :) I expect any alternative, solution.

Some of my code:

<body>

  <form name="numbers" method="post">
    <input type="text" id="number_1">
    <input type="text" id="number_2">
    <input type="text" id="number_3">
    <button id="evaluate" onclick="myFunction()">Calculate</button>
  </form>
  <p id="error"></p>
  <p id="result"></p>

</body>

<script>
  var number1 = document.getElementById("number_1").value.replace(/[^\d,.]/g, '');
  var number2 = document.getElementById("number_2").value.replace(/[^\d,.]/g, '');
  var number3 = document.getElementById("number_3").value.replace(/[^\d,.]/g, '');

  var error = document.getElementById("error").innerHTML;
  var result = document.getElementById("result").innerHTML;

  function myFunction() {
    if (isNaN(number1) || isNaN(number2) || isNaN(number3)) {
      error = "Not legal character";
    } else {}
  }
</script>

score 1 · Accepted Answer · answered Feb 07 '17 at 16:39

Here is solution. First of all, you have to use .split() method in order to turns a string to an array.

var number1 = document.getElementById("number_1").value.replace(/[^\d,.]/g, '').split(',');
//number1=[1,2,3]

Then you have to concat all 3 array and find only number which are exactly occuring twice, using .concat() method.

concatArray=number1.concat(number2,number3);
//concatArray=[1,2,3,1,2,3,4,1,5,6];

The next step is to find number of occurences of a specified element using filter() function.

If this number is 2 and the element not exists in the final array, then we will add it in final array, called arr.

To find out if element exists in array, we should use indexOf() method.

var error = document.getElementById("error").innerHTML;
  var result = document.getElementById("result").innerHTML;
  var arr=[];
  function myFunction() {
      var number1 = document.getElementById("number_1").value.replace(/[^\d,.]/g, '').split(',');
  var number2 = document.getElementById("number_2").value.replace(/[^\d,.]/g, '').split(',');
  var number3 = document.getElementById("number_3").value.replace(/[^\d,.]/g, '').split(','); 
      var concatArray=number1.concat(number2,number3);
    console.log(concatArray);
      for(i=0;i<concatArray.length;i++){
          var length=concatArray.filter(function(item){
              return item==concatArray[i];
          }).length;
          if(length==2 && arr.indexOf(concatArray[i])==-1){
             arr.push(concatArray[i]);
          }
      }
    console.log(arr);
  
  }

<body>

  <form name="numbers" method="post">
    <input type="text" id="number_1">
    <input type="text" id="number_2">
    <input type="text" id="number_3">
    <button id="evaluate" onclick="myFunction()">Calculate</button>
  </form>
  <p id="error"></p>
  <p id="result"></p>

score 0 · Answer 2 · edited May 23 '17 at 12:17

One way of doing this using Javascript. I am not including the code from UI but only showing the Javascript part.

It works in following steps.

Merging the Array into 1 array using Spread operator.
Using the GroupBy Custom function (from here) to group the Numbers so that count operation can be done. This returns a Map object
Filtering the Map obtained in above step where the criteria (count == 2) is met.

var num_array1 = [1,2,3];
var num_array2 = [1,2,3,4];
var num_array3 = [1,5,6];
var resultArray = [];

// Using the Spread Operator merging the Array into a Single Array.
var combinedNumArray = [...num_array1,...num_array2, ...num_array3];

// Group By number
var groupByNumbers = groupBy(combinedNumArray, i => i);

// Filter where count = 2
groupByNumbers.forEach(function(value, key) {
   if(value.length === 2) {
       resultArray.push(key);
   }
});

console.log(resultArray);

// Using a GroupBy Function
// Borrowed from https://stackoverflow.com/questions/14446511/what-is-the-most-efficient-method-to-groupby-on-a-javascript-array-of-objects
function groupBy(list, keyGetter) {
    const map = new Map();
    list.forEach((item) => {
        const key = keyGetter(item);
        if (!map.has(key)) {
            map.set(key, [item]);
        } else {
            map.get(key).push(item);
        }
    });
    return map;
}

Filter data in input fields. Javascript array comparsion?

2 Answers2