Parent Parameter Implementation in JS Reduce Function

Question

Parent Parameter Implementation in JS Reduce Function

I am currently working on enhancing my reduce function to transform a nested JSON object into a flat list for more convenient searching.

Consider the following JSON:

    {
  "MovementPatterns": [
    {
      "Id": "",
      "Name": "Warm-up",
      ...

Here is the code I have been using:

const exercises = data.MovementPatterns.reduce(
  (a, {Exercises}) => [...a, ...Exercises, ...a],
  [],
);

This code successfully flattens all exercises from each movement pattern into a single list. However, I now need to add the PARENT Movement Pattern ID to each exercise in the JSON.

[
        {
          "Id": "",
          "Name": "Lizard Stretch",
          ...

I would greatly appreciate any assistance in modifying my reduce function to achieve this additional requirement :)

Thank you!

javascript arrays reduce

Answer 1

Answer №1

You're getting very close! To complete the task, simply attach the parent's Id to each element in the Exercises array as MovementPatternId.

const updatedExercises = ab.MovementPatterns.reduce(
  (accumulator, { Exercises, Id }) => [
    ...accumulator,
    ...Exercises.map(exercise => ({ ...exercise, MovementPatternId: Id }))
  ],
  []
);

Answer 2

You're getting very close! To complete the task, simply attach the parent's Id to each element in the Exercises array as MovementPatternId.

const updatedExercises = ab.MovementPatterns.reduce(
  (accumulator, { Exercises, Id }) => [
    ...accumulator,
    ...Exercises.map(exercise => ({ ...exercise, MovementPatternId: Id }))
  ],
  []
);

Parent Parameter Implementation in JS Reduce Function

Answer №1

Similar questions

What is the best way to retrieve an array that was created using the useEffect hook in React?

conceal parent window element upon clicking an image within an iframe

Ways to trigger an onClick event of one div based on the presence of another div

Issues with Angular routing functionality being experienced

Are we on the correct path for breaking down code using react JS?

Displaying JSON data obtained from two separate arrays in AngularJS - is it possible?

When I change the camera, the camera control becomes active

What is the most efficient method for utilizing the dist and public directories in a webpack application?

A guide on how to showcase an alert message box with a radio button using JavaScript

What is the Ideal Location for Storing the JSON file within an Angular Project?

Using Vue.js, is it possible to apply a class to a clicked element and then remove it when another element is clicked?

Discover the mean number of events

Using the same geometric shapes repeatedly leads to occasional texture errors in THREE.JS

Employ CSS flexbox and/or JavaScript for creating a customizable webpage

Anticipating the fulfillment of promises with the power of Promises.all

What is the process for enabling a Submit button and updating its value following a successful Ajax response within a Django environment?

Utilizing CSS transitions in tandem with jQuery mousemove

The attention is consistently drawn to the link within the OffCanvas element

Save JSON data in an HTML document or vice versa

Issue with specialized HTML block on WordPress