Remove duplicates from loop - angularjs/javascript

Question

Here is a multidimensional array comparison. Demo : https://jsfiddle.net/vjnkc7dk/

I need to compare array1 & array2 and push single result to a div element.

<script type="text/javasctipt">var arr1 = [{"id":2,"student_name":"LSa"},{"id":3,"student_name":"Liu Sa"},{"id":77,"student_name":"Liu Sa"}];
var arr2 = [{"id":2,"student_name":"A"},{"id":3,"student_name":"L"},{"id":4,"student_name":"B"},{"id":55,"student_name":"C"},{"id":25,"student_name":"D"},{"id":23,"student_name":"E"},{"id":89,"student_name":"F"}];

arr1.forEach(function(value1) {
    arr2.forEach(function(value2) {
        if (value1.id === value2.id ) {
            document.getElementById('list').innerHTML += (value2.student_name + " -- true, <br/>");
        }else{
            document.getElementById('list').innerHTML += (value2.student_name +" -- false, <br/>");
        }
    });
});

//Expected result : A-true,L-true,B-false,C-false,D-false,E-false,F-false</script>
<div id="list"></div>

Answer 1

This gives you the desired output

    arr2.forEach(function(value2) {
        var found = false;
        arr1.forEach(function(value1) {
            if (value2.id === value1.id) {
                document.getElementById('list').innerHTML += (value2.student_name + " -- true, <br/>");
                found = true;
            }
        });
        if (!found) {
            document.getElementById('list').innerHTML += (value2.student_name + " -- false, <br/>");
        }
    });

Result

A -- true,
L -- true,
B -- false,
C -- false,
D -- false,
E -- false,
F -- false,

Answer 2

var arr1 = [{"id":2,"student_name":"LSa"},{"id":3,"student_name":"Liu Sa"},{"id":77,"student_name":"Liu Sa"}];
var arr2 = [{"id":2,"student_name":"A"},{"id":3,"student_name":"L"},{"id":4,"student_name":"B"},{"id":55,"student_name":"C"},{"id":25,"student_name":"D"},{"id":23,"student_name":"E"},{"id":89,"student_name":"F"}];

var combo = arr2.concat(arr1);

combo.filter(function (element, index) {
    var possibleDupeIndex = combo.findIndex(function (_element) {return _element.id === element.id});

    return possibleDupeIndex === -1 || possibleDupeIndex === index;
});

This removes all the duplicates from the combination of two arrays with the elements from the second array taking precedence over the elements from the first array.

Tool like underscore.js or lodash can be really useful. E.g. in lodash, the same can be achieved with:

_.uniqBy(arr2.concat(arr1), 'id')

Answer 3

You're looping over each of the elements in the first array, and adding to the list depending on whether or not it's id matches each of the ids in the second array.

To get your desired output, you could do the same loop but instead just add an attribute to the elements in the array if it's id is found.

arr1.forEach(function(value1) {
  arr2.forEach(function(value2) {
    if (value1.id === value2.id ) {
      value2.found = true;
    }
  });
});

Then output to the list like this.

arr2.forEach(function(val) {
    document.getElementById('list').innerHTML += 
          (val.student_name + " -- " + (val.found ? "true":"false") + "<br/>");
})

Fiddle