Necesito crear una nueva matriz de objetos a partir de la matriz existente en vuejs.
ejemplo primera matriz:
import { ref } from 'vue'; const base_array = ref([ {id: 1, name: Pill, timing: [morning, noon, evening, night]}, {id: 2, name: Tablet, timing: [morning, evening]}, ])Resultado Esperado :
const modified_array = ref([ {id: 1, name: Pill, timing: [morning]}, {id: 2, name: Pill, timing: [noon]}, {id: 3, name: Pill, timing: [evening]}, {id: 4, name: Pill, timing: [night]}, {id: 5, name: Tablet, timing: [morning]}, {id: 6, name: Tablet, timing: [evening]}, ])Probé forEach y recorrí la matriz, pero parece que no puedo encontrar la función correcta. Graciaas
Usando flatMap , algo como esto:
const base_array = ref([ { id: 1, name: Pill, timing: [morning, noon, evening, night] }, { id: 2, name: Tablet, timing: [morning, evening] }, ]); const modified_array = ref(base_array.value.flatMap(el => el.timing.map(t => ({id: el.id, name: el.name, timing: [t]}))));Este código debería funcionar
const modified_array = ref( base_array.value.flatMap(({timing, ...r}) => timing.map(timing => ({...r, timing:[timing]})) ) ); Sin embargo, si desea que la modified_array sea reactiva a los cambios en base_array , querrá usar la ref no computed para la modified_array como en el fragmento de código a continuación.
Si observa, la salida de la matriz_modificada cambia cuando la matriz_base cambia después de tres segundos con este código
setTimeout(() => base_array.value[1].timing.push('reactive!!!'), 3000);De todos modos, aquí está el ejemplo de código completamente funcional para vue3
const { ref, createApp, computed } = Vue; createApp({ setup() { const base_array = ref([ {id: 1, name: 'Pill', timing: ['morning', 'noon', 'evening', 'night']}, {id: 2, name: 'Tablet', timing: ['morning', 'evening']}, ]); const modified_array = computed(() => base_array.value.flatMap(({ timing, ...r }) => timing.map((t) => ({ ...r, timing: [t] })) ) ); setTimeout(() => base_array.value[1].timing.push('reactive!!!'), 3000); return { base_array, modified_array}; } }).mount('#app'); .as-console-wrapper { max-height: 0 !important; top: 0; } <script src="https://unpkg.com/vue@next"></script> <div id="app"> <ul> <li v-for="({id, name}) in base_array" :key="id"> {{ id }}: {{ name }} </li> </ul> <ul> <li v-for="({id, name, timing}, i) in modified_array" :key="i"> {{ id }}: {{ name }} {{timing[0]}} </li> </ul> </div>Simplemente puede lograrlo usando Array.forEach() junto con la Destructuring assignment .
Demostración en vivo :
const base_array = [ {id: 1, name: 'Pill', timing: ['morning', 'noon', 'evening', 'night']}, {id: 2, name: 'Tablet', timing: ['morning', 'evening']}, ]; let modified_arr = []; let index = 1; base_array.forEach(obj => { const {id, name, timing} = obj; timing.forEach(t => { modified_arr.push({ id: index, name, timing: [t]}) index++; }) }); console.log(modified_arr);