Estoy tratando de crear una matriz a partir de elementos dentro de objetos, así como elementos dentro de matrices dentro de objetos en una aplicación vue, usando foreach para recorrerlos. Funciona bien cuando solo tengo un solo elemento, pero no puedo averiguar cómo recorrer una matriz dentro del objeto y agregar todos esos elementos a la matriz que estoy creando.
lo que tengo ahora
const examples = [ { name: "Example 1", type: ["Meat", "Water", "Dairy"], showDetail: false }, { name: "Example 2", type: Fruit, showDetail: false }, { name: "Example 3", type: Vegetable, showDetail: false } ] new Vue({ data: { examplesList: examples, type: '' }, methods: { filterList: function() { this.type = event.target.value; } }, computed: { uniqueList: function() { const types = []; this.examplesList.forEach((example) => { if (!types.includes(example.type)) { types.push(example.type); } }); return types; } } })Funciona bien si elimino el objeto con la matriz dentro de "tipo" y agrego los elementos de frutas y verduras a la matriz. ¿Algunas ideas?
Salida deseada:
["Meat", "Water", "Dairy", "Fruit", "Vegetable"]
Aquí hay una posible solución. Necesitará traducir la solución a vue, por supuesto, pero el problema aquí realmente no tiene nada que ver específicamente con vue, por lo que he mostrado una solución javascript vainilla solo para simplificar las cosas.
const examples = [ { name: "Example 1", type: ["Meat", "Water", "Dairy", "Fruit"], showDetail: false }, { name: "Example 2", type: "Fruit", showDetail: false }, { name: "Example 3", type: "Vegetable", showDetail: false } ]; const types = []; examples.forEach((example) => { const exampleTypes = Array.isArray(example.type) ? example.type : [example.type]; for (let exampleType of exampleTypes) { if (!types.includes(exampleType)) { types.push(exampleType); } } }); console.log(types);Aquí hay una posible solución para lograr el resultado deseado:
computed: { uniqueList: function() { return this.examplesList.reduce( (acc, itm) => ( Array.isArray(itm.type) ? itm.type.filter(t => !acc.includes(t)).length > 0 ? [ ...acc, ...itm.type.filter(t => !acc.includes(t)) ] : acc : acc.includes(itm.type) ? acc : [...acc, itm.type] ), [] ) } }Explicación
reduce se usa en la matriz this.examplesListitm se procesa y acc es el acumulador/agregador (inicialmente establecido en una matriz vacía [] )itm.type es una matriz, entoncesitm.type no está ya presente en la matriz acc , inclúyalo (usando el operador ... spread)itm.type es una cadena)acc , entonces inclúyalo (nuevamente, usando ... operador de extensión)Eso es todo !
Por favor comente si hay más aclaraciones o preguntas.
Fragmento de código
const examples = [{ name: "Example 1", type: ["Meat", "Water", "Dairy"], showDetail: false }, { name: "Example 2", type: "Fruit", showDetail: false }, { name: "Example 3", type: "Vegetable", showDetail: false } ]; const getUniqueTypes = (arr = examples) => ( arr.reduce( (acc, itm) => ( Array.isArray(itm.type) ? itm.type.filter(t => !acc.includes(t)).length > 0 ? [ ...acc, ...itm.type.filter(t => !acc.includes(t)) ] : acc : acc.includes(itm.type) ? acc : [...acc, itm.type] ), [] ) ); console.log(getUniqueTypes());Aquí hay una forma abstracta de hacerlo usando un Set . Los conjuntos garantizan valores únicos, lo que significa que no es necesario verificar si un elemento está presente o no.
Usar solo una matriz será cada vez más costoso para verificar si un elemento ya se agregó, ya que tendrá que escanear la matriz completa para cada uno includes , O(n) complejidad de tiempo.
const examples = [{ name: "Example 1", type: ["Meat", "Water", "Dairy"], showDetail: false }, { name: "Example 2", type: "Fruit", showDetail: false }, { name: "Example 3", type: "Vegetable", showDetail: false } ]; const typeSet = new Set(); let types; examples.forEach((example) => { if (Array.isArray(example.type)) { example.type.forEach(type => { typeSet.add(type); }); } else { typeSet.add(example.type); } }); types = [...typeSet]; console.log(types);