3

Necesito listar un arreglo principal de objetos teniendo en cuenta que los mismos no se encuentren en otro arreglo.

Necesito saber cómo puedo hacerlo ya que estoy agregando ítems al hijo y necesito que en la lista padre se oculten los que ya se encuentran agregados.

Código:

let noLoad = [];
this.$store.getters.getClaves.find((claves) => { //Arreglo Padre
    this.getClavesInUbicacion.cpm.find((cpm) => { //Arreglo Hijo
        if(claves.clave.id !== cpm.clave_id) {
            noLoad.push(claves)
        }
    })
    noLoad.push(claves) //Añadir si no se encuentra
})

return noLoad.sort((a, b) => { //Sort
    if(this.orderBy.type == 'asc') {
        return a.id - b.id
    } else {
        return noLoad
    }
});

Pero mi código no funciona.

Ejemplo:

ubicaciones [
    {
        id: 1,
        name: 'ubicacion_1'
    },
    {
        id: 2,
        name: 'ubicacion_2'
    },
]

ubicaciones {
    cpm: {
        {
            id: 1,
            name: 'x'
        },
    }
}

En el código estoy creando un nuevo arreglo:

let noLoad = [];

Esto debería generar un arreglo donde solo debe mostrar la ubicación 2, ya que la 1 se encuentra en el hijo. A grandes rasgos, debo mostrar las ubicaciones que no se encuentren en cpm.

3
  • Si pudieras colocar un ejemplo de los datos, seria buenisimo. Commented el 19 nov. 2019 a las 16:58
  • Listo! :D quedo atento
    – DoubleM
    Commented el 19 nov. 2019 a las 17:09
  • El codigo que estas ejecutando te arroja algun error en la consola?. Porque el ejemplo que muestras de tus datos no es valido. Puedes verificar tus datos? para poder ayudarte mejor. Seria muy util si nos muestras los valores que retornan tus funciones this.$store.getters.getClaves y this.getClavesInUbicacion Commented el 20 nov. 2019 a las 0:52

2 respuestas 2

4
+50

Veo varias cosas por las que puede fallar tu codigo:

Veo que haces un uso incorrecto de los loops de JS, el loop "find" se utiliza para devolver el primer elemento del array que encaja con la lógico que le suministras (es como usar "filter[0]"), para hacer un recorrido como el que haces deberías usar "forEach".

Los datos de pruebas que nos has dado no encajan con la lógica que usas, hay propiedades que haces referencia que no aparecen en lo suministrado.

Estás haciendo push en varios sitios a la vez, el primero añade el elemento tantas veces como valores tienes menos 1 y al final tienes otro push que lo añade sin importar lo demás, lo cual no encaja con lo que intentas hacer.

En el sort, devuelves el array si no es orden "asc", sort necesita que le devuelvas valores como "-1" o "1" para ordenar correctamente.


let noLoad = [];
this.$store.getters.getClaves.find((claves) => {
  this.getClavesInUbicacion.cpm.find((cpm) => {
    if(claves.clave.id !== cpm.clave_id){
      noLoad.push(claves)
    }
  })
  noLoad.push(claves)
})


return noLoad.sort((a, b) => { //Sort
  if(this.orderBy.type == 'asc'){
    return  a.id - b.id
  }else{
    return noLoad
  }
});

Te dejo un ejemplo de lo que creo que intentas hacer, para ver si asi es lo que buscas:

Ejemplo en JSFiddle

1

Creo que estás usando Vuex con algunos métodos que no sitúas en tu código, así que es muy difícil saber qué devuelve getClaves, pero de todas maneras lo principal que deseas saber es cómo filtrar un array excluyendo los objetos que se encuentren en otro. Y esta es una de las formas en que lo puedes lograr:

Si quisieras devolver un objeto que tenga como propiedades todos los id de los objetos que se encuentran dentro de un array, podrías hacerlo usando el método reduce:

const cmp = [
  { id: 1, name: 'ubicacion 1' },
  { id: 4, name: 'ubicacion 4' }
];

const ids = cmp.reduce((obj, item) => (obj[item.id] = true, obj), {});

console.log(ids);

Y por otro lado, si quisieras filtrar un array de objetos, excluyendo aquellos en los que su propiedad id se encuentre como propiedad de otro objeto, puedes hacer lo siguiente usando el método filter:

const ids = {
    "1": true,
    "4": true
};

const ubicaciones = [
  { id: 1, name: 'ubicacion 1' },
  { id: 2, name: 'ubicacion 2' },
  { id: 3, name: 'ubicacion 3' },
  { id: 4, name: 'ubicacion 4' }
];

const filtro = ubicaciones.filter(item => !ids[item.id]);

console.log(filtro);

Teniendo esto en cuenta, observa el siguiente snippet de ejemplo. Teniendo un array de ubicaciones y un array cmp, se podría crear una tabla con los elementos del primero que no se encuentren en el segundo:

new Vue({
  el: '#app',
  data: {
    ubicaciones: [
      { id: 1, name: 'ubicacion 1' },
      { id: 2, name: 'ubicacion 2' },
      { id: 3, name: 'ubicacion 3' },
      { id: 4, name: 'ubicacion 4' }
    ],
    cmp: [
      { id: 1, name: 'ubicacion 1' },
      { id: 4, name: 'ubicacion 4' }
    ]
  },
  computed: {
    getClaves() {
      const ids = this.cmp.reduce((obj, item) => (obj[item.id] = true, obj), {});
      return this.ubicaciones.filter(item => !ids[item.id]);
    }
  }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <table class="table table-dark">
    <thead>
      <tr>
        <th>ID</th>
        <th>Ubicación</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in getClaves">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
      </tr>
    </tbody>
  </table>
</div>

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.