6

Justo como se hace en php (enlace) pero quisiera hacerlo en 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);

Actualización 1: Que de esos 2 arrays me retorne el siguiente:

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

console.log(data3);

16
  • Primero que todo quiero aclarar que esas variables no son JSON son dos arrays (arreglos) con objetos por elementos
    – Jorius
    Commented el 29 mar. 2017 a las 18:04
  • 1
    Existe (o existía porque ahora mismo no la encuentro) una pregunta similar en SOes, ¿es esto parte de una tarea escolar? ¿qué has intentado hasta el momento? ¿podrías añadir una mejor descripción para "retornar solo los que no se encuentren en uno de ellos"?
    – Alvaro Montoro
    Commented el 29 mar. 2017 a las 18:04
  • @Jorius ok gracias por la aclaratoria
    – bypabloc_
    Commented el 29 mar. 2017 a las 18:05
  • @AlvaroMontoro no hermano, es trabajo y ya edito la pregunta.
    – bypabloc_
    Commented el 29 mar. 2017 a las 18:05
  • Deben coincidir tanto en id y nombre???? Commented el 29 mar. 2017 a las 18:07

6 respuestas 6

6

No sé si esta sea la forma que buscas pero la añado ya que llega al resultado esperado. recorrer los dos array con dos For simples. luego ir comparando las diferencias entre los campos .

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));

1
  • gracias hermano
    – bypabloc_
    Commented el 29 mar. 2017 a las 19:34
2

Esto evidentemente se puede hacer con javascript puro pero, para trabajar con colecciones, ya hay herramientas archiprobadas como underscore y lodash.

La siguiente solución utiliza el método find de 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>

La principal dificultad de tu pregunta es que en javascript dos objetos no son iguales entre sí aunque tengan las mismas propiedades. Por lo mismo buscar la existencia de un determinado objeto usando el método indexOf

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

Siempre dirá que el objeto no está en el array. Habría que implementar una función de igualdad que se cumpla cuando las propiedades enumerables de dos objetos coincidan, y luego recorrer en bucles anidados ambos arrays comprobando si hay elemento que cumplan con esa función custom. Prefiero no reinventar la rueda.

1
  • "Prefiero no reinventar la rueda." jaja.. muy buen comentario. Gracias hermano. Hace justo lo que necesito.
    – bypabloc_
    Commented el 29 mar. 2017 a las 19:29
2

Aquí dejo una versión en JavaScript puro, aunque es un poco "fea". La idea es convertir los objetos a cadenas, para que sean más fáciles de trabajar. Y los pasos serían:

  1. Convertimos los arrays de objetos a arrays de cadenas
  2. Añadimos todas las cadenas del primer array que no estén en el segundo
  3. Añadimos todas las cadenas del segundo array que no estén en el primero
  4. Convertimos las cadenas de nuevo a objetos

El código quedaría así:

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);


Si no quieres convertir objetos a cadenas, puedes definir tu propia función de comparación y atravesar los arrays buscando elementos duplicados (en lugar de usar indexOf).

Algo como esto:

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);

1
  • gracias, como siempre un código bien explicado.
    – bypabloc_
    Commented el 29 mar. 2017 a las 19:35
2

Aquí mi versión de array_diff_assoc la cual:

  • Soporta 1 o más arreglos
  • Compara los objetos usando JSON.stringify
  • Devuelve todos los valores de arr1 que no están en todo los demas.

Demo:

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));

1
  • interesante solución, propia y sencilla. Gracias.
    – bypabloc_
    Commented el 29 mar. 2017 a las 19:34
1

Basado en tú pregunta he asumido que los objetos siempre van a ser simples, sin métodos ni nodos html, de lo contrario la solución sería un poco más compleja

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

Mi version para esta pregunta

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
  • 3
    Mira como responder, así te das una idea de las normas de la comunidad para dar respuestas de calidad y evitar que sean eliminadas. Trata de dar detalles de cómo tu propuesta resuelve la duda del OP.
    – DjCrazy
    Commented el 12 mar. 2020 a las 12:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.