Home / Questions / 58926
Accepted
bypabloc_
Asked: 2020-03-30 10:00:50 +0800 CST 2020-03-30 10:00:50 +0800 CST

How to compare two arrays and eliminate the objects that are the same and return only those that are not in one of them?

  • 772

Just as it is done in php( link ) but I would like to do it in javascript.

var data1 = [{
    "id": 1,
    "nombre": "Mezcla"
  },
  {
    "id": 6,
    "nombre": "No Se"
  },
  {
    "id": 5,
    "nombre": "Etiquetado"
  },
  {
    "id": 4,
    "nombre": "Vaciado"
  },
  {
    "id": 3,
    "nombre": "Llenado"
  },
  {
    "id": 2,
    "nombre": "Esterilizacion"
  }
];

console.log(data1);

var data2 = [{
    "id": 1,
    "nombre": "Mezcla"
  },
  {
    "id": 4,
    "nombre": "Vaciado"
  },
  {
    "id": 3,
    "nombre": "Llenado"
  },
  {
    "id": 2,
    "nombre": "Esterilizacion"
  }
];

console.log(data2);

Update 1: That of those 2 arraysI return the following:

var data3 = [{
    "id": 6,
    "nombre": "No Se"
  },
  {
    "id": 5,
    "nombre": "Etiquetado"
  }
];

console.log(data3);

javascript

6 Answers

  1. I don't know if this is the way you are looking for but I add it since it reaches the expected result. loop through the two arrays with two Forsimple ones. then go comparing the differences between the fields.

    var data1 = [
  { "id": 1, "nombre": "Mezcla" },
  { "id": 6, "nombre": "No Se" },
  { "id": 5, "nombre": "Etiquetado" },
  { "id": 4, "nombre": "Vaciado" },
  { "id": 3, "nombre": "Llenado" },
  { "id": 2, "nombre": "Esterilizacion" }
];

var data2 = [
  { "id": 1, "nombre": "Mezcla" },
  { "id": 4, "nombre": "Vaciado" },
  { "id": 3, "nombre": "Llenado" },
  { "id": 2, "nombre": "Esterilizacion" }
];

var array = [];
for (var i = 0; i < data1.length; i++) {
    var igual=false;
     for (var j = 0; j < data2.length & !igual; j++) {
         if(data1[i]['id'] == data2[j]['id'] && 
            data1[i]['nombre'] == data2[j]['nombre']) 
                 igual=true;
     }
    if(!igual)array.push(data1[i]);
}
console.log(JSON.stringify(array));

    • 6
  2. Best Answer

    This can obviously be done with pure javascript, but for working with collections, there are already well-proven tools like underscore and lodash .

    The following solution uses the find method of lodash.

    var data1 = [{
    "id": 1,
    "nombre": "Mezcla"
  },
  {
    "id": 6,
    "nombre": "No Se"
  },
  {
    "id": 5,
    "nombre": "Etiquetado"
  },
  {
    "id": 4,
    "nombre": "Vaciado"
  },
  {
    "id": 3,
    "nombre": "Llenado"
  },
  {
    "id": 2,
    "nombre": "Esterilizacion"
  }
];


var data2 = [{
    "id": 1,
    "nombre": "Mezcla"
  },
  {
    "id": 4,
    "nombre": "Vaciado"
  },
  {
    "id": 3,
    "nombre": "Llenado"
  },
  {
    "id": 2,
    "nombre": "Esterilizacion"
  }
];

var data3=[];

_.each(data1,function(objeto) {
  
  var elemento_en_data2 = _.find(data2,objeto);
  
  if(elemento_en_data2===undefined) {
    data3.push(objeto);
  }
  
});

console.log(data3);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

    The main difficulty of your question is that in javascript two objects are not equal to each other even though they have the same properties. For the same look for the existence of a certain object using the methodindexOf

    var posicion = data2.indexOf({"id": 2, "nombre": "Esterilizacion"});

    It will always say that the object is not in the array. It would be necessary to implement an equality function that is fulfilled when the enumerable properties of two objects coincide, and then go through both arrays in nested loops, checking if there are elements that fulfill that custom function. I'd rather not reinvent the wheel.

    • 2

  3. Here I leave a version in pure JavaScript, although it is a bit "ugly". The idea is to convert the objects to strings, to make them easier to work with. And the steps would be:

    1. We convert object arrays to string arrays
    2. We add all the strings of the first array that are not in the second
    3. We add all the strings of the second array that are not in the first
    4. We convert the strings back to objects

    The code would look like this:

    var data1 = [
  { "id": 1, "nombre": "Mezcla" },
  { "id": 6, "nombre": "No Se" },
  { "id": 5, "nombre": "Etiquetado" },
  { "id": 4, "nombre": "Vaciado" },
  { "id": 3, "nombre": "Llenado" },
  { "id": 2, "nombre": "Esterilizacion" }
];

var data2 = [
  { "id": 1, "nombre": "Mezcla" },
  { "id": 4, "nombre": "Vaciado" },
  { "id": 3, "nombre": "Llenado" },
  { "id": 2, "nombre": "Esterilizacion" }
];

// convertimos los arrays de objetos a arrays de cadenas
var aux1 = data1.map(function(el) { return JSON.stringify(el); });
var aux2 = data2.map(function(el) { return JSON.stringify(el); });

// añadimos todas las cadenas del primer array que no estén en el segundo
var data3 = aux1.filter(function(el) {
  if (aux2.indexOf(el) < 0) return el;
});

// añadimos todas las cadenas del segundo array que no estén en el primero
data3 = data3.concat( aux2.filter(function(el) {
  if (aux1.indexOf(el) < 0) return el;
}));

// convertimos las cadenas de nuevo a objetos
data3 = data3.map(function (el) { return JSON.parse(el); });

// mostramos el resultado
console.log(data3);

    If you don't want to convert objects to strings, you can define your own compare function and traverse the arrays looking for duplicate elements (instead of using indexOf).

    Something like this:

    var data1 = [
  { "id": 1, "nombre": "Mezcla" },
  { "id": 6, "nombre": "No Se" },
  { "id": 5, "nombre": "Etiquetado" },
  { "id": 4, "nombre": "Vaciado" },
  { "id": 3, "nombre": "Llenado" },
  { "id": 2, "nombre": "Esterilizacion" }
];

var data2 = [
  { "id": 1, "nombre": "Mezcla" },
  { "id": 4, "nombre": "Vaciado" },
  { "id": 3, "nombre": "Llenado" },
  { "id": 2, "nombre": "Esterilizacion" }
];

// añadimos todas las cadenas del primer array que no estén en el segundo
var data3 = data1.filter(function(el) {
  var found = false, x = 0;
  while (x < data2.length && !found) {
    if (el.id == data2[x].id && el.nombre == data2[x].nombre) found = true;
    x++;
  }
  if (!found) return el;
});

// añadimos todas las cadenas del segundo array que no estén en el primero
data3 = data3.concat( data2.filter(function(el) {
  var found = false, x = 0;
  while (x < data1.length && !found) {
    if (el.id == data1[x].id && el.nombre == data1[x].nombre) found = true;
    x++;
  }
  if (!found) return el;
}));

console.log(data3);

    • 2

  4. Here my version of array_diff_assocwhich:

    • Supports 1 o másarrangements
    • Compare the objects usingJSON.stringify
    • Returns all values ​​of arr1that are not in everything else .

    demonstration:

    function array_diff_assoc () {
  var args = Array.prototype.slice.call(arguments),
   arr = args.shift().splice(0);

  args.forEach(function(arrN) {
    arrN.forEach(function(objN) {
      for(var i = 0; i < arr.length; i++) {
        if (JSON.stringify(arr[i]) === JSON.stringify(objN)) {
          arr.splice(i, 1);
          break;
        }
      }
    });
  });
  
  return arr;
}

var data1 = [{
    "id": 1,
    "nombre": "Mezcla"
  },
  {
    "id": 6,
    "nombre": "No Se"
  },
  {
    "id": 5,
    "nombre": "Etiquetado"
  },
  {
    "id": 4,
    "nombre": "Vaciado"
  },
  {
    "id": 3,
    "nombre": "Llenado"
  },
  {
    "id": 2,
    "nombre": "Esterilizacion"
  }
];

var data2 = [{
    "id": 1,
    "nombre": "Mezcla"
  },
  {
    "id": 4,
    "nombre": "Vaciado"
  },
  {
    "id": 3,
    "nombre": "Llenado"
  },
  {
    "id": 2,
    "nombre": "Esterilizacion"
  }
];

console.log(array_diff_assoc(data1, data2));

    • 2

  5. Based on your question I have assumed that the objects will always be simple, without methods or html nodes, otherwise the solution would be a bit more complex

    Array.prototype.arrayDiffAssoc = function(){
            //Une los arrays
    return [].concat.apply( this, arguments )
                //Convierte a string los json (funciona siempre que sea un objeto simple)
                .map(function(obj){ return JSON.stringify(obj) })
                //remueve los elementos duplicados que van a retornar siempre lenght > 1
                .filter(function(item, index, self) { return self.filter(function(duplicate){ return item === duplicate; }).length === 1; })
                //restaura los objetos en el array
                .map(function(obj) { return JSON.parse(obj); });
}

//Te permite
data1.arrayDiffAssoc(data2); // [{"id": 6,"nombre": "No Se"},{"id": 5, "nombre": "Etiquetado"}]

//o en caso de tener otro array para comparar
data1.arrayDiffAssoc(data2, data3); // [{"id": 6,"nombre": "No Se"},{"id": 5, "nombre": "Etiquetado"}]
    • 1

  6. My version for this question

    var data1 = [{
    "id": 1,
    "nombre": "Mezcla"
  },
  {
    "id": 6,
    "nombre": "No Se"
  },
  {
    "id": 5,
    "nombre": "Etiquetado"
  },
  {
    "id": 4,
    "nombre": "Vaciado"
  },
  {
    "id": 3,
    "nombre": "Llenado"
  },
  {
    "id": 2,
    "nombre": "Esterilizacion"
  }
];

var data2 = [{
    "id": 1,
    "nombre": "Mezcla"
  },
  {
    "id": 4,
    "nombre": "Vaciado"
  },
  {
    "id": 3,
    "nombre": "Llenado"
  },
  {
    "id": 2,
    "nombre": "Esterilizacion"
  }
];

    var data3=[];
        data1.forEach(i => {
        var existe= false;
        data2.forEach(j => {
          !igual && i.id== j.id&& (existe= true);
        });
        !existe && data3.push(i);
      });

console.log(data3);
    • 1