Steps to generate a fresh array from a given array of objects in JavaScript

Question

Steps to generate a fresh array from a given array of objects in JavaScript

Looking to transform an existing array into a new array of objects in Vue.js.

Here's the initial array :

import { ref } from 'vue';

const base_array = ref([
  {id: 1, name: Pill, timing: [morning, noon, evening, night]},
  {id: 2, name: Tablet, timing: [morning, evening]},
])

Desired output :

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]},
])

I've attempted using forEach and looping through the array, but haven't found the right solution yet. Appreciate any help. Thank you!

javascript arrays vue.js

Answer 1

Answer №1

To achieve the desired outcome, you can utilize the flatMap method in the following manner:

const originalData = ref([
      { id: 1, name: "Pill", timing: ["morning", "noon", "evening", "night"] },
      { id: 2, name: "Tablet", timing: ["morning", "evening"] },
    ]);

const updatedData  = ref(originalData.value.flatMap(item => item.timing.map(time => ({id: item.id, name: item.name, timing: [time]}))));

Answer 2

To achieve the desired outcome, you can utilize the flatMap method in the following manner:

const originalData = ref([
      { id: 1, name: "Pill", timing: ["morning", "noon", "evening", "night"] },
      { id: 2, name: "Tablet", timing: ["morning", "evening"] },
    ]);

const updatedData  = ref(originalData.value.flatMap(item => item.timing.map(time => ({id: item.id, name: item.name, timing: [time]}))));

Answer 3

Answer №2

This piece of code is functioning properly

const updated_array = ref(
    original_array.value.flatMap(({timing, ...rest}) =>
        timing.map(time => ({...rest, timing:[time]}))
    )
);

But, if you require updated_array to react to changes in original_array, it's better to use computed instead of ref just like shown below

If you observe, the output of modified_array changes when there is a change in base_array after three seconds using this script

setTimeout(() => original_array.value[1].timing.push('reactive!!!'), 3000);

In any case, here's an illustration of fully operational code for vue3

const { ref, createApp, computed } = Vue;


createApp({
    setup() {
        const original_array = ref([
          {id: 1, name: 'Pill', timing: ['morning', 'noon', 'evening', 'night']},
          {id: 2, name: 'Tablet', timing: ['morning', 'evening']},
        ]);
        const updated_array = computed(() =>
            original_array.value.flatMap(({ timing, ...rest }) =>
                timing.map((t) => ({ ...rest, timing: [t] }))
            )
        );
        setTimeout(() => original_array.value[1].timing.push('reactive!!!'), 3000);
        return { original_array, updated_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 original_array" :key="id">
    {{ id }}: {{ name }}
    </li>
  </ul>
  <ul>
    <li v-for="({id, name, timing}, i) in updated_array" :key="i">
    {{ id }}: {{ name }} {{timing[0]}} 
    </li>
  </ul>
</div>

Answer 4

This piece of code is functioning properly

const updated_array = ref(
    original_array.value.flatMap(({timing, ...rest}) =>
        timing.map(time => ({...rest, timing:[time]}))
    )
);

But, if you require updated_array to react to changes in original_array, it's better to use computed instead of ref just like shown below

If you observe, the output of modified_array changes when there is a change in base_array after three seconds using this script

setTimeout(() => original_array.value[1].timing.push('reactive!!!'), 3000);

In any case, here's an illustration of fully operational code for vue3

const { ref, createApp, computed } = Vue;


createApp({
    setup() {
        const original_array = ref([
          {id: 1, name: 'Pill', timing: ['morning', 'noon', 'evening', 'night']},
          {id: 2, name: 'Tablet', timing: ['morning', 'evening']},
        ]);
        const updated_array = computed(() =>
            original_array.value.flatMap(({ timing, ...rest }) =>
                timing.map((t) => ({ ...rest, timing: [t] }))
            )
        );
        setTimeout(() => original_array.value[1].timing.push('reactive!!!'), 3000);
        return { original_array, updated_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 original_array" :key="id">
    {{ id }}: {{ name }}
    </li>
  </ul>
  <ul>
    <li v-for="({id, name, timing}, i) in updated_array" :key="i">
    {{ id }}: {{ name }} {{timing[0]}} 
    </li>
  </ul>
</div>

Answer 5

Answer №3

If you want to achieve this, all you need to do is utilize the combination of Array.forEach() along with the Destructuring assignment.

Check out a Live Demo below:

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);

Answer 6

If you want to achieve this, all you need to do is utilize the combination of Array.forEach() along with the Destructuring assignment.

Check out a Live Demo below:

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);

Steps to generate a fresh array from a given array of objects in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing a combination of MVC, jQuery, and Ajax to ensure that JavaScript is fully loaded before proceeding

The AJAX request is failing to reach the server

What steps should I take to develop an Outlook add-in that displays read receipts for action items in sent emails?

JavaScript fails to function in an HTML file

Having trouble with the Moment.js diff function in your React Native project?

Passing a callback function through a prop in Vue.js

Updating to a newer version of jQuery causes issues with pop-out submenus

Using the OR Operator with a different function in React

What is the level of visibility in Nextjs?

Dynamic font sizing in CSS allows text on a webpage to

Execute the eslint loader within the node_modules of a specific directory that is npm linked and has not been compiled

Easily fetching data with AJAX through jQuery

Update the WooCommerce shopping cart page automatically upon product removal

jQuery UI Accordion - Adjusting Panel Height to Content Size

How can you switch the display between two different class names using JavaScript?

React Jodit Editor experiencing focus loss with onchange event and useMemo functionality not functioning properly

Tips for displaying an asp.net form using javascript functions

Challenges with incrementing in Jquery's each loop and setTimeout

Transform a group of objects in Typescript into a new object with a modified structure

Mastering SVG Path Coordinates using Pure JavaScript