Tengo una serie de objetos:
array = [ { age: 5, name: foo }, { age: 5, name: bar }, { age: 8, name: baz } ]Recorro la matriz de esta manera:
<div v-for="(arr, index) in array" :key="index"> <h5>age: {{ arr.age }}</h5> <ul> <li>{{ arr.name }}</li> </ul> </div>que se traduce así:
<div> <h5>age: 5</h5> <ul> <li>foe</li> </ul> </div> <div> <h5>age: 5</h5> <ul> <li>bar</li> </ul> </div> <div> <h5>age: 8</h5> <ul> <li>baz</li> </ul> </div>sin embargo, quiero que las matrices con la misma edad se fusionen así:
<div> <h5>age: 5</h5> <ul> <li>foe</li> <li>bar</li> </ul> </div> <div> <h5>age: 8</h5> <ul> <li>baz</li> </ul> </div>Estoy pensando en hacer un objeto separado y fusionar el contenido de las matrices si los pares clave/valor de edad son los mismos. ¿Cómo puedo obtener esto?
Prueba como el siguiente fragmento:
new Vue({ el: '#demo', data() { return { array: [{age: 5, name: 'foo'}, {age: 5, name: 'bar'}, {age: 8, name: 'baz'}] } }, computed: { newArr() { const uniques = [...new Set( this.array.map(x => JSON.stringify(((o) => ({ age: o.age, }))(x)))) ].map(JSON.parse); this.array.forEach(a => { let idx = uniques.findIndex(u => u.age === a.age) if(!uniques[idx].name) uniques[idx].name = [] uniques[idx].name.push(a.name) }) return uniques } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div v-for="(arr, index) in newArr" :key="index"> <h5>age: {{ arr.age }}</h5> <ul> <li v-for="(name, i) in arr.name" :key="i">{{ name }}</li> </ul> </div> </div>Puede analizar su objeto para crear un objeto que se vea como le gusta y luego crear su plantilla
array = [ { age: 5, name: "foo" }, { age: 5, name: "bar" }, { age: 8, name: "baz" } ]; var newarr = {}; array.map((e) => { if (!newarr[e.age]) newarr[e.age] = []; newarr[e.age].push(e.name); }); for (const [key, value] of Object.entries(newarr)) { console.log(`${key}`); for (const v of value) { console.log(`${v}`); } console.log("=========================="); }