JSFiddle - React, Tailwind, and code Playground

by Bart Kalisz

JavaScript

const tree = {"id":1,"name":"Rusty Corp.","emoji":"\ud83d\udc15","parent_id":null,"children":[{"id":2,"name":"Food","emoji":"\ud83e\udd69","parent_id":1,"children":[]}, {"id":3,"name":"Canine Therapy","emoji":"\ud83d\ude0c","parent_id":1,"children":[{"id":4,"name":"Massages","emoji":"\ud83d\udc86","parent_id":3,"children":[]}, {"id":5,"name":"Games","emoji":"\ud83c\udfbe","parent_id":3,"children":[]}]}]};

const asArray = createTeamsArrayFromTree(tree);
const asTree = createTreeFromTeamsArray(asArray)

console.clear();
console.log(asArray, asTree);

function createTeamsArrayFromTree( object ) {
	const teams = Array.isArray(object)
  	? object
    : [deepCopyObject(object)]; // Create deep copy on initial step
  
  return teams.reduce((acc, team) => {
  	acc.push(team);
  	acc.push.apply(acc, createTeamsArrayFromTree(team.children));
    delete team.children;

		return acc;
  }, []);
}

function createTreeFromTeamsArray( array, parentId = null ) {
	return array.reduce( ( acc, child ) => {
		if ( child.parent_id === parentId ) {
			const children = createTreeFromTeamsArray( array, child.id );
			const team = Object.assign({}, child, { children });

			if (parentId === null) {
      	return team;
      } 
      acc.push( team );	
		}

		return acc;
	}, parentId === null ? {} : [] );
}

function deepCopyObject(object) {
	return JSON.parse(JSON.stringify(object));
}