Remove/splice duplicates of first array when comparing with second array

Question

I am trying to create a way to move items between two boxes.

I fill the left box with items. When clicking on a item, it moves to the right box.

I can fill the left box with several items that I can move.

If I have already moved a item from the left, I should not see that item anymore in the left box.

To do this. I have made a removeDuplicate() from the left box array.

But I have a fault that makes one item to accour on i the left box even if I have it in the right box.

I made a JSFiddle to demonstrate the problem.

If you click three items from Item_01, the select three items from Item_02. This makes six items in the right box. If you go back to Items_01. The three items you selected earlier should not be in the lefyt box now. But as you can see, one of those three are still there.

So my removeDuplicate() does not work. And I can't figure out why.

I really need help.

My -jsfiddle

function removeDuplicates() {
//alert("klick");
    for(var i=0; i < arrItems.length; i++) {
        for(var j=0; j < arrSelectedItems.length; j++) {
            if(JSON.stringify(arrItems[i])  == JSON.stringify(arrSelectedItems[j])) {
                arrItems.splice(i, 1);
            }
        }
    }

}

Response to suggestion about this question being a same as another question. This is not the same because I do not want to create a new array. I want to remove duplicate in exsisting array.

Possible duplicate of [Get the unique values from two arrays and put them in another array - Jquery](http://stackoverflow.com/questions/15912538/get-the-unique-values-from-two-arrays-and-put-them-in-another-array-jquery) — Gangadhar Jannu, Mar 17 '17 at 10:14
it looks like that you're going for a wrong approach. I don't see any reason the so-called "removing duplicates" would be involved here. You have 1 list, so clicking on any item should move it right away to the second list. Technically you need 2 lists to manage the shown items. The UI just need to render those 2 lists accordingly. — Hopeless, Mar 17 '17 at 10:16
@Hopeless I'm not sure what you mean. In my fiddle I have two lists for the left box. But in reality there can be tens of different list. I can't see another approach then this. Maybe I'm not getting what you are saying. — sumpen, Mar 17 '17 at 11:01

score 0 · Accepted Answer · answered Mar 17 '17 at 10:28

You could try to update your removeDuplicate function like this

function removeDuplicates() {
        for(var i = arrItems.length - 1; i >= 0; i--) {
            for(var j = 0; j < arrSelectedItems.length; j++) {
                if(JSON.stringify(arrItems[i])  == JSON.stringify(arrSelectedItems[j])) {
                    arrItems.splice(i, 1);
                }
            }
        }

    }

To remove an item in an array, you should start from the end. I've updated your JSFiddle

This removed the problem. Thank you very much. I have been struggling with this for several days. Thanks again. — sumpen, Mar 17 '17 at 10:57

score 0 · Answer 2 · answered Mar 17 '17 at 11:02

My suggestion is to use the underscore.js library:

var _ = require('underscore')

var left = [1,2,3,4,5]
var right = [2,5,6,7]

left = _.difference(left, right)

console.log('left', left) // left [ 1, 3, 4 ]   
console.log('right', right) // right [ 2, 5, 6, 7 ]

Remove/splice duplicates of first array when comparing with second array

2 Answers2