Recursively build JSON from two arrays

Question

This for Material UI Treeview. I am trying to build a recursive function to dynamically build out the JSON from two arrays. The first array is the MainArray which would be the starting point. The second array is the directories array.

The goal is to pair the directories obj's to its parent in a new property named SubDirectories.

const mainArray = [{
  Id: 1,
  Name: "test",
  SubDirectoryCount: 10,
  Files: []
}]

const directories = [{
    Id: 56,
    Name: "Client 2",
    SubDirectoryCount: 1,
    ParentId: 1,
    Files: []
  },  {
    Id: 53,
    Name: "Client 3",
    SubDirectoryCount: 1,
    ParentId: 1,
    Files: []
  },
  {
    Id: 50,
    Name: "Client 4",
    SubDirectoryCount: 1,
    ParentId: 1,
    Files: []
  },
  {
    Id: 48,
    Name: "Client 5",
    SubDirectoryCount: 1,
    ParentId: 53,
    Files: []
  },
   {
    Id: 47,
    Name: "Client 5",
    SubDirectoryCount: 1,
    ParentId: 53,
    Files: []
  },
   {
    Id: 47,
    Name: "Client 5",
    SubDirectoryCount: 1,
    ParentId: 53,
    Files: []
  }]

What I have without recursion...

export const createTreeData = ( mainArray , directories ) => {


  for (let idx in mainArray) {

    if (directories ) {
      const directoriesList = [];

      directories.map((dir) => {
        if (mainArray.Id === dir.ParentId) {
          directoriesList.push(dir);
        }
      });
      mainArray.SubDirectories = directories;
    }
  }

  return mainArray ;

};

The final output:

  [{
      Id: 1,
      Name: "test",
      SubDirectoryCount: 10,
      Files: []
      *SubDirectories: [{ 
        Id: 56,
        Name: "Client 2",
        SubDirectoryCount: 1,
        ParentId: 1,
        Files: []
      },{
        Id: 53,
        Name: "Client 3",
        SubDirectoryCount: 1,
        ParentId: 1,
        Files: [],
        *SubDirectories:[{
            Id: 48,
            Name: "Client 5",
            SubDirectoryCount: 1,
            ParentId: 53,
            Files: []
          },
           {
            Id: 47,
            Name: "Client 5",
            SubDirectoryCount: 1,
            ParentId: 53,
            Files: []
          },
           {
            Id: 47,
            Name: "Client 5",
            SubDirectoryCount: 1,
            ParentId: 53,
            Files: []
          }]},
      {
        Id: 50,
        Name: "Client 4",
        SubDirectoryCount: 1,
        ParentId: 1,
        Files: []
      }
      ]
    }]

• New property

Answer 1

Add directories to an associative array and remap each time.

const directories = [{Id:56,Name:"Client 2",SubDirectoryCount:1,ParentId:1,Files:[]},{Id:53,Name:"Client 3",SubDirectoryCount:1,ParentId:1,Files:[]},{Id:50,Name:"Client 4",SubDirectoryCount:1,ParentId:1,Files:[]},{Id:48,Name:"Client 5",SubDirectoryCount:1,ParentId:53,Files:[]},{Id:47,Name:"Client 5",SubDirectoryCount:1,ParentId:53,Files:[]},{Id:49,Name:"Client 5",SubDirectoryCount:1,ParentId:53,Files:[]}];

const moreDirectories = [{Id:156,Name:"Client 12",SubDirectoryCount:1,ParentId:49,Files:[]},{Id:53,Name:"Client 334",SubDirectoryCount:1,ParentId:48,Files:[]},{Id:150,Name:"Client 14",SubDirectoryCount:1,ParentId:1,Files:[]},{Id:148,Name:"Client 15",SubDirectoryCount:1,ParentId:53,Files:[]},{Id:147,Name:"Client 15",SubDirectoryCount:1,ParentId:49,Files:[]},{Id:149,Name:"Client 51",SubDirectoryCount:1,ParentId:50,Files:[]}];

// keep a flatlist of all folders in memory
const flatlist = {
  1: {Id:1,Name:"test",SubDirectoryCount:10,Files:[]}
};

/**
 * Updates the flat map and returns the root
 * @param {Array} folder updates
 * @returns {Array} updated root
 */
const update = updates => {
  // append updates to flatlist
  updates.forEach(d => {
    flatlist[d.Id] = Object.assign(flatlist[d.Id] || {}, d);
  });

  // remove deleted folders?
  // ...

  // destroy existing sub-directories and create SubDirectories
  Object.values(flatlist).forEach(directory => directory.SubDirectories = []);

  // remap 
  Object.keys(flatlist).forEach(key => {
    const directory = flatlist[key];
    const parent = flatlist[directory.ParentId];
    if (parent) {
      parent.SubDirectories.push(directory);
    }
  });

  // return a new copy of the root directory
  return Object.assign({}, flatlist[1]);
};

update(directories)
update(moreDirectories)
update(directories)
console.log(update(directories))

Answer 2

You could tackle this using Array.reduce.

Pass in the original main array to the reduce function and then process each element in directories to attach it to main.

Snippet:

const mainArray = [{
  Id: 1,
  Name: "test",
  SubDirectoryCount: 10,
  Files: []
}];

const directories = [{
    Id: 56,
    Name: "Client 2",
    SubDirectoryCount: 1,
    ParentId: 1,
    Files: []
  },
  {
    Id: 53,
    Name: "Client 3",
    SubDirectoryCount: 1,
    ParentId: 1,
    Files: []
  },
  {
    Id: 50,
    Name: "Client 4",
    SubDirectoryCount: 1,
    ParentId: 1,
    Files: []
  },
  {
    Id: 48,
    Name: "Client 5",
    SubDirectoryCount: 1,
    ParentId: 53,
    Files: []
  },
  {
    Id: 47,
    Name: "Client 5",
    SubDirectoryCount: 1,
    ParentId: 53,
    Files: []
  },
  {
    Id: 49,
    Name: "Client 5",
    SubDirectoryCount: 1,
    ParentId: 53,
    Files: []
  },
  {
    Id: 47,
    Name: "Client 5",
    SubDirectoryCount: 1,
    ParentId: 49,
    Files: []
  }
];

const search = (data, parentId) => {
  for (let i = 0; i < data.length; i++) {
    if (data[i].Id === parentId) {
      return data[i];
    }

    if (data[i].SubDirectories) {
      return search(data[i].SubDirectories, parentId);
    }
  }
};

const final = directories.reduce((previousValue, currentValue) => {
  const parent = search(previousValue, currentValue.ParentId);
  parent.SubDirectories = parent.SubDirectories || [];
  parent.SubDirectories.push(currentValue);

  return previousValue;
}, mainArray);

console.info(final);

Answer 3

If you have one flat list of all directories, you can iterate once.

const mainArray = [{Id:1,Name:"test",SubDirectoryCount:10,Files:[]}];
const directories = [{Id:56,Name:"Client 2",SubDirectoryCount:1,ParentId:1,Files:[]},{Id:53,Name:"Client 3",SubDirectoryCount:1,ParentId:1,Files:[]},{Id:50,Name:"Client 4",SubDirectoryCount:1,ParentId:1,Files:[]},{Id:48,Name:"Client 5",SubDirectoryCount:1,ParentId:53,Files:[]},{Id:47,Name:"Client 5",SubDirectoryCount:1,ParentId:53,Files:[]},{Id:49,Name:"Client 5",SubDirectoryCount:1,ParentId:53,Files:[]}];

// create flat list
const tmp = mainArray.concat(directories);
tmp.forEach(directory => {
  const parent = tmp.find(item => item.Id === directory.ParentId);

  if(parent) {
      parent.SubDirectories = parent.SubDirectories || [];
      parent.SubDirectories.push(directory)
  }
});

console.log(mainArray)

Answer 4

EDIT: Since objects in JavaScript are passed by reference you could use it to your advantage reducing your original list into a object { [id]: [object] } (to access parent 'immediately') then filtering to find any root directory while populating the files attribute of your parent (if have one).

---

Original
Why not merging both arrays with Array.concat and do it with Array.reduce and just filtering any root directory for your treetable

['aaa', 'bb'].concat(['ab', 'bc'])
> Array(4) [ "aaa", "bb", "ab", "bc" ]

const directories = [
  {
    Id: 1,
    Name: 'test'
  },
  {
    Id: 56,
    Name: 'Client 2',
    ParentId: 1
  },
  {
    Id: 53,
    Name: 'Client 3',
    ParentId: 1
  },
  {
    Id: 50,
    Name: 'Client 4',
    ParentId: 1
  },
  {
    Id: 48,
    Name: 'Client 5',
    ParentId: 53
  },
  {
    Id: 47,
    Name: 'Client 5',
    ParentId: 53
  },
  {
    Id: 47,
    Name: 'Client 5',
    ParentId: 53
  }
]

const files = directories.reduce((acc, cur) => {
  acc[cur.Id] = cur
  return acc
}, {})

const rootDir = directories.filter((dir) => {
  if (dir.ParentId) {
    if (!files[dir.ParentId].dirs) {
      files[dir.ParentId].dirs = []
    }
    files[dir.ParentId].dirs.push(dir)
    return false
  }
  return true
})

console.log(rootDir)