Filtering a First Argument Array by Non-array Second Arguments

Question

I am a javascript beginner trying to solve a challenge posed by an online code camp. This problem is similar to that posed at Using an array to filter an array Javascript. I have studied this but remain unsuccessful. I have tried for many hours without arriving at a solution.

The exact challenge states:

Remove all values (last argument(s)) from an array (first argument) and >return as a new array.

I know this is not much to go on. In the example below, the desired output would be the following array:

[1,1]

The basic premise is to filter the first argument, which is an array, by x number of non-array arguments. Where the array elements are the same as the non-array arguments, those elements would be removed from the array. Below is a non-functioning sample of a path I've attempted:

<code>
     function result(arr) {
  var list = [];
  var i;
  for(i in Object.keys(arguments)) {
      if(i > 0) {
          list.push(arguments[i]);
      }
  }

  function answer(arr1, arr2) {
    return arr1.filter(function(a) {
        return arr2.indexOf(a) >= 0;
    });
  }

  return answer(arr, list);
}
result([1, 2, 3, 1, 2, 3], 2, 3); 
</code>

Answer 1

OK, now maybe I understand. If that's the actual challenge wording, it is poorly worded.

My interpretation is that you are being asked to write a function that takes a first argument that is an array and then after that zero or more successive arguments. The task is to remove all the zero or more successive arguments from the array that was passed in and return a new array with those items removed.

function filterArray(sourceArray, arg1, arg2 /* ... more args */) {
    // get arguments after the first argument into their own array
    var args = Array.prototype.slice.call(arguments, 1);
    return sourceArray.filter(function(element, index, array) {
        return args.indexOf(element) === -1;
    });
}

This works by getting the successive arguments into their own array and then calling .filter() on the sourceArray. The callback for .filter() then uses .indexOf() to check if each element is in the argument list. If it is not, return true to keep the value in the output array. If it is in the argument list, return false so it is removed from the output array.

Working demo: http://jsfiddle.net/jfriend00/u8c5vvd9/

---

If you want compatibility with versions of IE before IE9, you can either add a polyfill for .filter() and .indexOf() which is easy and shown here and here or you could do the filtering manually like this:

function filterArray(sourceArray, arg1, arg2 /* ... more args */) {
    var result = [], found, item;
    for (var i = 0; i < sourceArray.length; i++) {
        item = sourceArray[i];
        found = false;
        for (var argIndex = 1; argIndex < arguments.length; argIndex++) {
            if (arguments[argIndex] === item) {
                found = true;
                break;
            }
        }
        if (!found) {
            result.push(item);
        }
    }
    return result;
}

Working demo: http://jsfiddle.net/jfriend00/g586cbpp/

Answer 2

The easiest solution I can imagine would be:

function result(haystack) {
    // converting the 'non-array' list of additional arguments
    // into an array:
    var needles = Array.prototype.slice.call(arguments, 1),
        // using Array.prototype.filter() to filter the 
        // supplied array ('haystack'):
        filtered = haystack.filter(function (el) {
            // the first argument ('el') is the current array-element

            // if the current array-element is *not* found in the
            // array of 'needles', we retain the element:
            return needles.indexOf(el) === -1;
        });
    return filtered;
}

console.log(result([1, 2, 3, 1, 2, 3], 2, 3)); // [1, 1]

This solution, particularly the use of Array.prototype.filter(), is problematic in IE 8, the MDN reference link (below) offers a shim for those older browsers.

function result(haystack) {
  var needles = Array.prototype.slice.call(arguments, 1),
    filtered = haystack.filter(function(el) {
      return needles.indexOf(el) === -1;
    });
  
  /* just to display the values: */
  document.getElementById('haystack').textContent = haystack.join(', ');
  document.getElementById('needles').textContent = needles.join(', ');
  document.getElementById('result').textContent = filtered.join(', ');
  
  return filtered;
}

console.log(result([1, 2, 3, 1, 2, 3], 2, 3));

ol, li {
  list-style-type: none;
}

li::before {
  content: attr(id) ': ';
  display: inline-block;
  width: 20%;
  text-transform: capitalize;
}

li:empty {
  display: none;
}

<ol>
  <li id="haystack"></li>
  <li id="needles"></li>
  <li id="result"></li>
  </ol>

References:

• Array.prototype.filter().
• Array.prototype.slice().
• Function.prototype.call().

Answer 3

This will check for an exact match of all arguments against the values in the input array. And then return an array stripped of those values.

It does not use .filter() .slice() .call() or Object.keys() so it is fully compliant with ancient web-browser versions.

<script type="text/javascript">

function result(input_array) {
    //  Breakpoint if input is not an array... return the object inside an array for consistency of return type
    if( !(input_array instanceof Array) ) return [].push(input_array);

    //  Gather list of arguments to reject.
    var reject_list = [];
    for(var i in arguments)
        if(i > 0)
            reject_list.push(arguments[i]);

    //  check each element in the input array if it is a value to reject.
    var output_array = []
    for(var i = 0; i < input_array.length; i++){
        var value_is_ok = true
        for(var r = 0; r < reject_list.length; r++){
            if( input_array[i] == reject_list[r] ){
                value_is_ok = false
                break
            }//endif
        }//endfor

        if( value_is_ok )
            output_array.push(input_array[i]);

    }//endfor


    return output_array
}

var my_array = [1, 2, 3, 1, 2, 3]
console.log( result(my_array, 2, 3) )   //  result is [1,1]

</script>