拼接未从对象数组中删除第一个索引

Question

I have two arrays of objects and I want to compare the objects of the first array to the ones of the second array. If they match, I use the splice to remove the object from the second array.

I have the following code

existing.forEach((existingitem, existingindex, existingfeatures) => {     
  (newdatafeat.features).forEach((newitem, newindex, newfeatures) => { 
    console.log('existing index-name --- new index-name', existingindex ,' - ',existingitem.values_.name,' - ',newindex,' - ',newitem.properties.name,'-----');
    if (existingitem.values_.id == newitem.properties.id &&  existingitem.values_.cat == newitem.properties.cat){              
      console.log(' index to remove - ', newindex); (newdatafeat.features).splice(newindex,1);              
    } 
  })
});   

So, If existing is

var existing= [
  { info: true, values_:{id:1, cat:true, name : "John"} }, 
  { info : true, values_:{id:2, cat:false, name : "Alice"} }  
];

and newdatafeat.features is

var newdatafeat= {
   status:scanned,
   features : [  { info: true, properties:{id:1, cat:true, name : "Mike"} }, 
    {  info : false, properties:{id:22, cat:false,name : "Jenny"} }  ]
};

Then, Mike from newdatafeat.features should be removed.

The error is that every item of the newdatafeat.features array with index 0 is not removed. In the loop, I can see index to remove - 0 , but Mike is never removed. I know, because if I console.log the newdatafeat.features after the loops, Mike is there

This is inside an angular6 code.

What am I missing here?

Thanks

Answer 1

I had to clean up some code, but it looks like yours is working fine. It identified one element to be removed, called slice and it was gone.

 var existing = [{ info: true, values_: { id: 1, cat: true, name: "John" } }, { info: true, values_: { id: 2, cat: false, name: "Alice" } } ]; var newdata = { status: "scanned", features: [ { info: true, properties: { id: 1, cat: true, name: "Mike" } }, { info: false, properties: { id: 22, cat: false, name: "Jenny" } } ] }; existing.forEach( (existingitem, existingindex, existingfeatures) => { (newdata.features).forEach((newitem, newindex, newfeatures) => { console.log('existing index-name --- new index-name', existingindex, ' - ', existingitem.values_.name, ' - ', newindex, ' - ', newitem.properties.name, '-----'); if (existingitem.values_.id == newitem.properties.id && existingitem.values_.cat == newitem.properties.cat) { console.log(' index to remove - ', newindex); (newdata.features).splice(newindex, 1); } }) }); console.log(newdata.features); 

Answer 2

The main problem here is that you are iterating an array in a loop, but you are removing items from that array in the same loop. So the index will often be off, and the wrong element or no element will be removed. It can be hard to reproduce with simple examples, but here ya go:

 function removeVowels(letters) { letters.forEach((element, index, arr) => { if ('aeiou'.indexOf(element) > -1) { arr.splice(index, 1); } }); } var myArray = ['a','b','c','d','e']; removeVowels(myArray); console.log(myArray); // works great! var myArray = ['a','e','c','d','b']; removeVowels(myArray); console.log(myArray); // wtf! 

A simple way to approach this problem is to handle the looping manually, and change the index manually if you DO remove an element.

 function removeVowels(letters) { for (var i=0; i < letters.length; i++) { if ('aeiou'.indexOf(letters[i]) > -1) { letters.splice(i, 1); i--; } } } var myArray = ['a','b','c','d','e']; removeVowels(myArray); console.log(myArray); // works great! var myArray = ['a','e','c','d','b']; removeVowels(myArray); console.log(myArray); // hurray!