Home / Questions / 508617
Accepted
Fernando Javier León
Asked: 2022-06-12 16:07:48 +0800 CST 2022-06-12 16:07:48 +0800 CST

How to compare two arrays of objects and get objects that do not match in a field? JavaScript

  • 772

I am comparing two arrays, which are as follows configuraionesPersonalizadas:

configuraionesPersonalizadas = [
    {
      id: 4163,
      bloque: 'GradoAcademico',
      atributo: 'id_docente',
      orden: 1,
      visible_cv_personalizado: true,
      mapeo: 'id_docente',
      id_user: 127,
    },
    {
      id: 4164,
      bloque: 'GradoAcademico',
      atributo: 'id',
      orden: 1,
      visible_cv_personalizado: true,
      mapeo: 'id',
      id_user: 127,
    },
    {
      id: 4165,
      bloque: 'GradoAcademico',
      atributo: 'fecha_emision',
      orden: 1,
      visible_cv_personalizado: true,
      mapeo: 'fecha_emision',
      id_user: 127,
    },
  ];

And configuraciones:

  configuraciones = [
    {
      id: 179,
      bloque: 'GradoAcademico',
      atributo: 'id',
      mapeo: 'Id Grado Académico',
      usuario: 1,
    },
    {
      id: 180,
      bloque: 'GradoAcademico',
      atributo: 'id_docente',
      mapeo: 'id Docente',
      usuario: 1,
    },
    {
      id: 181,
      bloque: 'GradoAcademico',
      atributo: 'fecha_emision',
      mapeo: 'Fecha Emisión',
      usuario: 1,
    },
    {
      id: 182,
      bloque: 'GradoAcademico',
      atributo: 'lugar_emision',
      mapeo: 'Lugar Emisión',
      usuario: 1,
    },
  ];

I have the following function:

 funcion() {
    this.configuraciones.forEach((atributo) => {
      let atribtutoOriginal = this.configuraionesPersonalizadas.find(
        (b) => b.atributo === atributo.atributo && b.bloque === atributo.bloque
      );

      if (
        atribtutoOriginal.bloque == atributo.bloque &&
        atribtutoOriginal.mapeo == atributo.mapeo
      )
        return;
      // console.log('sevaeditar', atributo, atribtutoOriginal);
      const objetoEditar = {
        id: atribtutoOriginal.id,
        bloque: atribtutoOriginal.bloque,
        atributo: atribtutoOriginal.atributo,
        orden: atribtutoOriginal.orden,
        visible_cv_personalizado: atribtutoOriginal.visible_cv_personalizado,
        mapeo: atributo.mapeo,
        id_user: Number(atribtutoOriginal.id_user),
      };

      console.log('objetoEditarconfiguraionesPersonalizadas', objetoEditar);
    });
  }

This function gets me when the mapeoarray field configuraionesPersonalizadasdoes not match the mapeoarray field, configuracionesin case it does not match, I create an object objetoEditarwith the value of mapeoso cofiguracionesthat I can edit it.

It works fine for me, the problem I have is that it only works when the length of the arrays configuraionesPersonalizadasand configuracionesare equal. In case it configuraionesPersonalizadashas less length it configurcionesthrows me the following error.

Error: Cannot read properties of undefined (reading 'mapeo')

How can I optimize or make it work for me without the need for the length of the arrays to be the same? Thanks in advance.

This is what I have so far: stackblitz

javascript

2 Answers

  1. Best Answer

    we have then

    • an array configuraciones, which contains N official settings of the application. Each setting has (much simplifying) the attribute to configure, its default value (mapping) and a grouping hierarchy (block)
    • an array of configuracionesPersonalizadasthat allows you to modify a subset of the above.

    For each default setting you look for an element in the custom settings that matches both in group and in attribute

     let atribtutoOriginal = this.configuracionesPersonalizadas.find(
    (b) => b.atributo === atributo.atributo && b.bloque === atributo.bloque
  );

    If the value (mapping) matches, you don't need to compute the mutation that differentiates both inputs, so you return

      if (
    atribtutoOriginal.bloque == atributo.bloque &&
    atribtutoOriginal.mapeo == atributo.mapeo
  )
    return;

    And if it does not match, then it is appropriate to compute the mutation.

    What triggers the error is the case where there is not atribtutoOriginal( findit gives you undefined) then it is not an object and it does not have internal logic to request its attributes bloqueor mapeo.

    Anyway, when it atribtutoOriginalis undefinedyou also don't need to compute the mutation or compare anything.

    if( !atribtutoOriginal 
   || (
        atribtutoOriginal.bloque == atributo.bloque &&
        atribtutoOriginal.mapeo == atributo.mapeo
      )
) return;

    Just as an observation, it's redundant for you to compare the block again .

    • 1

  2. As you have already been told, the validation in the conditional ifthat has to do with the block is unnecessary since you do it in the find.

    Now, the solution that I would give would be through reduce , and for each iteration, we build the object that you need according to the condition that you require.

    const configuraionesPersonalizadas = [
    {
        id: 4163,
        bloque: 'GradoAcademico',
        atributo: 'id_docente',
        orden: 1,
        visible_cv_personalizado: true,
        mapeo: 'id_docente',
        id_user: 127
    },
    {
        id: 4164,
        bloque: 'GradoAcademico',
        atributo: 'id',
        orden: 1,
        visible_cv_personalizado: true,
        mapeo: 'id',
        id_user: 127
    },
    {
        id: 4165,
        bloque: 'GradoAcademico',
        atributo: 'fecha_emision',
        orden: 1,
        visible_cv_personalizado: true,
        mapeo: 'fecha_emision',
        id_user: 127
    }
];

const configuraciones = [
    {
        id: 179,
        bloque: 'GradoAcademico',
        atributo: 'id',
        mapeo: 'Id Grado Académico',
        usuario: 1
    },
    {
        id: 180,
        bloque: 'GradoAcademico',
        atributo: 'id_docente',
        mapeo: 'id Docente',
        usuario: 1
    },
    {
        id: 181,
        bloque: 'GradoAcademico',
        atributo: 'fecha_emision',
        mapeo: 'Fecha Emisión',
        usuario: 1
    },
    {
        id: 182,
        bloque: 'GradoAcademico',
        atributo: 'lugar_emision',
        mapeo: 'Lugar Emisión',
        usuario: 1
    }
];

(() => {
    const aux = configuraciones.reduce((prev, curr) => {
        const item = configuraionesPersonalizadas.find(x => x.atributo === curr.atributo && x.bloque === curr.bloque);

        if (item && item.mapeo !== curr.mapeo) {
            const { id, bloque, atributo, orden, visible_cv_personalizado, mapeo, id_user } = item;
            const objeto = {
                id,
                bloque,
                atributo,
                orden,
                visible_cv_personalizado,
                mapeo,
                id_user: +id_user
            };
            prev = [...prev, objeto];
        }

        return prev;
    }, []);

    console.log(aux);
})();

    In fact, it's not much different than what you have. We are getting by findthe matching object; then we validate in the if, that it has found a match and compare its mapping property . If the condition is not met, we build the object and push it to the prev array .

    Let us know how it went and if you have any questions :)

    • 0