Javascript - substract array list from another array list [duplicate]

Question

How can I to substract/delete/remove all coincident elements from an array list within another array list using .filter() of ES6 javascript?

Jquery's solution is also accepted, but any solution must be IE11+ and Chrome iOs compatible. Avoid using external libraries (except jquery). This is what I tried so far:

   var originList = [
        {"id":1,"name":"www"},
    	{"id":2, "name":"fff"},
    	{"id":3, "name":"ddd"},
    	{"id":4, "name":"aaaa"},
    	{"id":5, "name":"zzzz"},
    	{"id":6, "name":"Susane"},
        {"id":7,"name":"yyy"}
    ];

    var rest = [
        {"id":1,"name":"www"},
    	{"id":2, "name":"fff"},
    	{"id":3, "name":"ddd"},
        {"id":4, "name":"aaaa"},
        {"id":5, "name":"zzzz"},
    ];

    var newList = [];
    var list = [];

    $.each(originList, function(id,data){
       list = originList.filter(function(obj,a){
		    return data.id !== obj.id ? obj : false;
	    });
    });


    $.each(originList, function(id,data){
       	$.each(rest, function(alli,allData){
		    if(data.id === allData.id) {
  			    newList[id] = data;
		    }
		
	    });
    });

    console.log(list);	//does not exclude id:6
    console.log(newList); //this result is what I want

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Eddie · Accepted Answer · 2018-03-02 17:25:58Z

3

You can use filter and find for the newer version.

var originList = [
  {"id":1,"name":"www"},
  {"id":2, "name":"fff"},
  {"id":3, "name":"ddd"},
  {"id":4, "name":"aaaa"},
  {"id":5, "name":"zzzz"},
  {"id":6, "name":"Susane"},
  {"id":7,"name":"yyy"}
];
	
var rest = [
  {"id":1,"name":"www"},
  {"id":2, "name":"fff"},
  {"id":3, "name":"ddd"},
  {"id":4, "name":"aaaa"},
  {"id":5, "name":"zzzz"},
];
	
var newList = originList.filter( o => rest.find( x => o.id === x.id ) );
	
console.log( newList );

Doc: .filter(), .find()

Can use for and if for the older version.

var originList = [
  {"id":1,"name":"www"},
  {"id":2, "name":"fff"},
  {"id":3, "name":"ddd"},
  {"id":4, "name":"aaaa"},
  {"id":5, "name":"zzzz"},
  {"id":6, "name":"Susane"},
  {"id":7,"name":"yyy"}
];
	
var rest = [
  {"id":1,"name":"www"},
  {"id":2, "name":"fff"},
  {"id":3, "name":"ddd"},
  {"id":4, "name":"aaaa"},
  {"id":5, "name":"zzzz"},
];

var newList = [];
for (var i = 0; i < originList.length; i++) {
  for (var x = 0; x < rest.length; x++) {
    if ( rest[x].id === originList[i].id ) {
        newList.push( originList[i] );
        break;
    }
  }
}

console.log( newList );

edited Mar 2, 2018 at 17:25

answered Mar 2, 2018 at 16:53

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Eddie Over a year ago

Ohh.. Ill update it in a bit :)

Keith Over a year ago

For IE10+ compatibility, could I suggest using a transpiler & pollyfill's, writing code for older browsers lack of features is worse than a red hot poker in the eye.

Eddie Over a year ago

Updated. Just use if and for

Alex Over a year ago

What I need its just the opposite the values your newList is returning

Andreas Over a year ago

@AXL IE10 or IE11... Most or rather all ES6 features are not available in any of those browsers: kangax.github.io/compat-table/es6

|

fyasir · Accepted Answer · 2018-03-02 17:09:10Z

1

var originList = [
  {"id":1,"name":"www"},
  {"id":2, "name":"fff"},
  {"id":3, "name":"ddd"},
  {"id":4, "name":"aaaa"},
  {"id":5, "name":"zzzz"},
  {"id":6, "name":"Susane"},
  {"id":7,"name":"yyy"}
];
	
var rest = [
  {"id":1,"name":"www"},
  {"id":2, "name":"fff"},
  {"id":3, "name":"ddd"},
  {"id":4, "name":"aaaa"},
  {"id":5, "name":"zzzz"},
];

function containsObject(obj, list) {
  for (var i = 0; i < list.length; i++) {
    if (list[i].id === obj.id) return true;
  }
  return false;
}
	
var newList = originList.filter(function(item){  return !containsObject(item, rest)
});
	
console.log( newList );

edited Mar 2, 2018 at 17:09

answered Mar 2, 2018 at 17:06

fyasir

2,9902 gold badges26 silver badges36 bronze badges

7 Comments

fyasir Over a year ago

Good catch. going to change it

Alex Over a year ago

I see IE does support filter()

fyasir Over a year ago

But IE doesn't support arrow function. So I changed the arrow function

Alex Over a year ago

What is the return false statement on the containsObject function for?

Andreas Over a year ago

@AXL The function passed to .filter() has to return true (keep the element) or false (get rid of the element). Check the documentation you've linked.

|

zetawars · Accepted Answer · 2018-03-02 17:02:49Z

0

you can try this

var value1s = {};
arr1.forEach(function(item) {
  value1s[item.id] = item.name;
});

arr2.forEach(function(item) {
  if (item.id in value1s) {
    theFunction(value1s[item.id], item.name);
  }
});

function theFunction(id, name) {
   console.log("{"+id + ":" + name+"}");
}

answered Mar 2, 2018 at 17:02

zetawars

1,0811 gold badge12 silver badges29 bronze badges

Comments

acontell · Accepted Answer · 2018-03-02 17:03:19Z

0

If you have lodash at your disposal, you can use the function _.differenceWith and pass _.isEqual as the comparator invoked per element (if you want total equality) or a custom comparator if you only want to compare some properties of the object to determine equality.

Lodash also grants you browser compatibility.

Hope it helps.

var originList = [
  {"id":1,"name":"www"},
  {"id":2, "name":"fff"},
  {"id":3, "name":"ddd"},
  {"id":4, "name":"aaaa"},
  {"id":5, "name":"zzzz"},
  {"id":6, "name":"Susane"},
  {"id":7,"name":"yyy"}
];
	
var rest = [
  {"id":1,"name":"www"},
  {"id":2, "name":"fff"},
  {"id":3, "name":"ddd"},
  {"id":4, "name":"aaaa"},
  {"id":5, "name":"zzzz"},
];

console.log(_.differenceWith(originList, rest, _.isEqual));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>

answered Mar 2, 2018 at 17:03

acontell

6,9321 gold badge22 silver badges33 bronze badges

1 Comment

Alex Over a year ago

I don't have it, just jQuery

th3n3wguy · Accepted Answer · 2018-03-02 17:09:48Z

0

var originList = [
    {"id":1,"name":"www"},
    {"id":2, "name":"fff"},
    {"id":3, "name":"ddd"},
    {"id":4, "name":"aaaa"},
    {"id":5, "name":"zzzz"},
    {"id":6, "name":"Susane"},
    {"id":7,"name":"yyy"}
];

var rest = [
    {"id":1,"name":"www"},
    {"id":2, "name":"fff"},
    {"id":3, "name":"ddd"},
    {"id":4, "name":"aaaa"},
    {"id":5, "name":"zzzz"},
];

const newList = originList.filter(function(originListVal) {
  return rest.reduce(function(currentVal, nextRestVal) {
    return currentVal || originListVal.id === nextRestVal.id;
  }, false);
});

console.log(newList);

edited Mar 2, 2018 at 17:09

answered Mar 2, 2018 at 17:03

th3n3wguy

3,7242 gold badges25 silver badges31 bronze badges

6 Comments

th3n3wguy Over a year ago

@Andreas => I will update my comment now. I always forget that they don't support it in IE, but they do in Edge.

Alex Over a year ago

But here says it's IE compatible

Andreas Over a year ago

@AXL It was about arrow functions (=>) and not Array.prototype.filter()

th3n3wguy Over a year ago

@Andreas => Was this a solution to your question?

Andreas Over a year ago

What question? O.o

|

arizafar · Accepted Answer · 2018-03-02 17:29:28Z

0

let newList = originList.filter(ele => !rest.some(fil => ele.id === fil.id));

If cannot use arrow functions

let newList = originList.filter(function(ele) {
  return rest.some(function(fil) {
    return ele.id === fil.id;
  });
});

edited Mar 2, 2018 at 17:29

answered Mar 2, 2018 at 17:10

arizafar

3,1321 gold badge11 silver badges19 bronze badges

4 Comments

arizafar Over a year ago

changing arrow functions is not a big deal.

arizafar Over a year ago

updated the answer.

Alex Over a year ago

That is the opposite result I expect. I want a new list without ids 6 & 7

arizafar Over a year ago

sorry about that, updated.

Collectives™ on Stack Overflow

Javascript - substract array list from another array list [duplicate]

6 Answers 6

8 Comments

7 Comments

Comments

1 Comment

6 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

8 Comments

7 Comments

Comments

1 Comment

6 Comments

4 Comments

Linked

Related