Restructure data dynamically to treedata in Javascript

Question

I have an array of actors and each of them have arrays like movies, awards and so on. I want to change the structure of my data that I receive from the server into a tree data. My array name should be in a new array children that has 3 properties: a self generated id, name which is the name of my array for example 'movies', and children which contains the actual data for my array. I need a head start to create this dynamically because my data can grow. Any help is much appreciated.

data structure from the server:

[{
    name: 'Tom Holland',
    id: 1,
    movies: [{
      typename: 'MoviesData',
      id: 12,
      name: 'Spider-Man NWH',
      stars: 4
    }, {
      typename: 'MoviesData',
      id: 13,
      name: 'Spider-Man Far from Home',
      stars: 4
    }],
    awards: [{
      typename: 'AwardsData',
      id: 6,
      name: 'BAFTA Award',
      year: 2017
    }, {
      typename: 'AwardsData',
      id: 7,
      name: 'Empire Award',
      year: 2013
    }], //... more Arrays like Hobbies, TV-Shows, etc...
  }, //... more Actors
]

required tree data:

[{
    name: "Tom Holland",
    id: 1,
    children: [{
      id: 3, // self generated id for each array
      name: "Movies", // Object key name
      children: [
                   {typename: 'MoviesData', id: 12, name: 'Spider-Man NWH', stars: 4},
                   {typename: 'MoviesData', id: 13, name: 'Spider-Man Far from Home', stars: 4},...
                   ]
    }, {
      id: 15, // self generated id
      name: "Awards",
      children: [
                   {typename:'AwardsData', id: 6, name: 'BAFTA Award', year: 2017},
                   {typename:'AwardsData', id: 7, name: 'Empire Award', value: 2013},...
                   ]
    }, //...]
  }, //...]

jsN00b · Accepted Answer · 2022-06-01 13:22:53Z

1

Presented below is one possible way to achieve the desired objective.

Code Snippet

const myTransform = arr => (
  arr.map(
    ({name, id, ...rest}) => ({
      name, id,
      children: [
        ...Object.entries(rest)
        .map(([name, v], idx) => ({
          name,
          id: ++idx,
          // Math.floor(Math.random() * 10),    // if "id" has to be random
          children: v
        }))
      ]
    })
  )
);

/* Code with explanation
// method to transform given array
const myTransform = arr => (
  arr.map(      // iterate using ".map()"
    ({name, id, ...rest}) => ({     // destructure name, id & rest
      name, id,               // keep name, id as-is
      children: [             // transform "rest" into an array
        ...Object.entries(rest)  // "rest" is an object, iterate over its key-value pairs
        .map(([name, v], idx) => ({     // track the index as "idx"
          name,               // transform k-v pair to have "name" prop
          id: ++idx,          // this is the "self-generated" id as needed
          // in case one needs it to be random, instead of "++idx", use below
          // Math.floor(Math.random() * 10),
          children: v         // move the array to nested children
        }))
      ]
    })
  )
);

*/

const dataArr = [{
    name: 'Tom Holland',
    id: 1,
    Movies: [{
      typename: 'MoviesData',
      id: 12,
      name: 'Spider-Man NWH',
      stars: 4
    }, {
      typename: 'MoviesData',
      id: 13,
      name: 'Spider-Man Far from Home',
      stars: 4
    }],
    Awards: [{
      typename: 'AwardsData',
      id: 6,
      name: 'BAFTA Award',
      year: 2017
    }, {
      typename: 'AwardsData',
      id: 7,
      name: 'Empire Award',
      year: 2013
    }], //... more Arrays like Hobbies, TV-Shows, etc...
  }, //... more Actors
];

console.log(
  'transformed array:\n',
  myTransform(dataArr)
);

.as-console-wrapper { max-height: 100% !important; top: 0 }

Explanation

Inline comments added to the snippet above.

edited Jun 1, 2022 at 13:22

answered Jun 1, 2022 at 10:45

jsN00b

3,7032 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

newlearner Over a year ago

brilliant that works very well with my data thank you!!

newlearner Over a year ago

one question: the first array children is like a nested array can I reduce it to one array?

jsN00b Over a year ago

...Object.entries(rest) --> added 3 dots on the above line. Just needed to spread the result of the Object.entries() - OR - we can simply not enclose it in an array.

Collectives™ on Stack Overflow

Restructure data dynamically to treedata in Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related