Flat array to deep nested object array - javascript

I'm trying to take a flat array of paths, and create nested array of objects. The trouble i'm having is with the recursive part of generating children nodes...
Starting array:
const paths = [
'/',
'/blog',
'/blog/filename',
'/blog/slug',
'/blog/title',
'/website',
'/website/deploy',
'/website/infrastructure',
'/website/infrastructure/aws-notes',
];
With a desired output structure:
[
{
path: '/',
},
{
path: '/blog',
children: [
{
path: '/blog/filename',
},
{
path: '/blog/slug',
},
{
path: '/blog/title',
}
]
},
{
path: '/website',
children: [
{
path: '/website/deploy',
},
{
path: '/website/infrastructure',
children: [
{
path: '/website/infrastructure/aws-notes',
}
],
},
],
},
]
Here's where i'm at so far, i've tried a few things but ultimately ends in infinite loops or poor structure:
const getPathParts = (path) => path.substring(1).split('/');
const getPathLevel = (path) => getPathParts(path).length - 1;
const getTree = (paths) => paths.reduce((tree, path, i, paths) => {
const pathParts = getPathParts(path);
const pathDepth = getPathLevel(path);
const current = pathParts[pathDepth];
const parent = pathParts[pathDepth - 1] || null;
const item = {
path,
children: [],
};
if (pathDepth > 0 || parent !== null) {
// recursive check for parent, push this as a child to that parent?
return [...tree];
}
return [
...tree,
item,
];
}, []);
I've tried array.find|some|filter to retrieve the parent, but i'm at a loss how to push the node as a child into the correct nested node. NOTE: i've extracted some code for the example, pardon any syntax/spelling issues.

You could take a nested approach by taking the pathes and split them and check if the object with the path already exists or not. If not push a new object.
Later return the children of the actual object. Proceeed until no more path items are available.
const
paths = ['/', '/blog', '/blog/filename', '/blog/slug', '/blog/title', '/website', '/website/deploy', '/website/infrastructure', '/website/infrastructure/aws-notes'],
result = paths.reduce((r, path) => {
path.split(/(?=\/)/).reduce((a, _, i, p) => {
var temp = a.find(o => o.path === p.slice(0, i + 1).join(''));
if (!temp) {
a.push(temp = { path, children: [] });
}
return temp.children;
}, r);
return r;
}, []);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
For creating by using only pathes to final directories, you could take parts of the path for creating.
This approach prevents empty children arrays.
const
paths = [
'/',
'/blog/filename',
'/blog/slug',
'/blog/title',
'/website/deploy',
'/website/infrastructure/aws-notes'
],
result = [];
paths.reduce((r, string) => {
string.split(/(?=\/)/).reduce((o, _, i, p) => {
o.children = o.children || [];
var path = p.slice(0, i + 1).join(''),
temp = o.children.find(o => o.path === path);
if (!temp) {
o.children.push(temp = { path });
}
return temp;
}, r);
return r;
}, { children: result });
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Related

Convert file path into object

Say I have the following strings:
"files/photos/foo.png"
"files/videos/movie.mov"
and I want to convert them to the following object:
{
name: "files"
children: [{
name: "photos",
children: [{
name: "foo.png",
id: "files/photos/foo.png"
}]
},{
name: "videos",
children: [{
name: "movie.mov",
id: "files/videos/movie.mov"
}]
}]
}
What would be the best approach for doing so? I've tried writing some recursive functions, however admit that I'm struggling at the moment.
Here's a quick snippet with a possible solution. It uses nested loops, the outer splitting each path by the delimeter and pop()ing the file portion out of the array. The inner iterates the parts of the path and constructs the heirarchy by reasigning branch on each iteration. Finally the file portion of the path is added to the deepest branch.
const data = [
'files/photos/foo.png',
'files/photos/bar.png',
'files/videos/movie.mov',
'docs/photos/sd.jpg'
];
const tree = { root: {} }
for (const path of data) {
const parts = path.split('/');
const file = parts.pop();
let branch = tree, partPath = '';
for (const part of parts) {
partPath += `${part}/`;
if (partPath === `${part}/`) {
tree.root[partPath] = (tree[partPath] ??= { name: part, children: [] });
} else if (tree[partPath] === undefined) {
tree[partPath] = { name: part, children: [] };
branch.children.push(tree[partPath]);
}
branch = tree[partPath];
}
branch.children.push({ name: file, id: path });
}
const result = Object.values(tree.root)
console.log(JSON.stringify(result, null, 2))
.as-console-wrapper { max-height: 100% !important; top: 0; }
.as-console-row::after { display: none !important; }
Or as a function.
function mergeAssets(assets) {
const tree = { root: {} }
for (const path of data) {
const parts = path.split('/');
const file = parts.pop();
let branch = tree, partPath = '';
for (const part of parts) {
partPath += `${part}/`;
if (partPath === `${part}/`) {
tree.root[partPath] = (tree[partPath] ??= { name: part, children: [] });
} else if (tree[partPath] === undefined) {
tree[partPath] = { name: part, children: [] };
branch.children.push(tree[partPath]);
}
branch = tree[partPath];
}
branch.children.push({ name: file, id: path });
}
return {
name: "assets",
children: Object.values(tree.root)
}
}
const data = [
'files/photos/foo.png',
'files/photos/bar.png',
'files/videos/movie.mov',
'docs/photos/sd.jpg'
];
const result = mergeAssets(data);
console.log(JSON.stringify(result, null, 2))
I was able to find a solution using a recursive function. If others have any tips on how to improve this, I'd love to hear.
function mergeObjects(parentArray,path,originalName){
if(originalName === undefined){
originalName = path;
}
const parts = path.split("/");
var nextPart = "";
parts.forEach((part, index) => index > 0 ? nextPart += (nextPart !== "" ? "/" : "") + part : null);
//does the parentArray contain a child with our name?
const indexOfChild = parentArray.findIndex(child => child.name === parts[0]);
if(indexOfChild === -1){
//this item does not exist
if(parts.length > 1){
var index = parentArray.push({
name: parts[0],
children : []
}) - 1;
mergeObjects(parentArray[index].children,nextPart,originalName);
}else{
parentArray.push({
name: parts[0],
id : originalName
});
}
}else{
//this item already exists
if(parts.length > 1){
mergeObjects(parentArray[indexOfChild].children,nextPart,originalName);
}
}
}
And the function is called with the following:
function mergeAssets(assets){
var obj = {
name: "assets",
children: []
};
assets.forEach(asset => mergeObjects(obj.children,asset));
return obj;
}

how to populate tree from flatTreeNode?

I have treeFlatNode array i want to structure it in tree format. or can i display this array in tree directly in angular.
data=[
{
expandable: true
level: 0
name: "2021-12-31"
path: null
},
{
expandable: false
level: 2
name: "A.txt"
path: "2021-12-31/B/C/A.txt"
}
]
required format
tree=[
name:"2021-12-03",
children:[
name:"B",
children:[{
name:"C"
children:[{
name:"A.txt"
children:[]
}]
}]
]
]
You could use an object (map) that maps a (sub)path to a node in the final tree. If it doesn't exist yet, it is added to the parent's children.
As your tree structure actually represents a forest (there can be multiple roots), I would name the result variable forest instead of tree
Snippet:
function toForest(data) {
const roots = [];
const map = {};
for (const obj of data) {
let key = "";
let children = roots;
for (const name of (obj.path ?? obj.name).split("/")) {
let child = map[key += "/" + name];
if (!child) children.push(map[key] = child = { name, children: [] });
({children} = child);
}
}
return roots;
}
// Example run
let data = [{expandable: true,level: 0,name: "2021-12-31",path: null}, {expandable: false,level: 2,name: "A.txt",path: "2021-12-31/B/C/A.txt"}];
let forest = toForest(data);
console.log(forest);
So, to transform your data structure to the desired one, you can use following function (with comments =) ):
transform(data){
const tree = [];
for (let node of data) {
// If there's no path it's a parent node
// but add it only if it doesn't exist yet
if (node.path === null && tree.every(n => n.name !== node.name)) {
tree.push({ name: node.name, children: [] });
continue;
}
// Extract name of parent node and other nodes
const [parentNodeName, ...pathElems]: string[] = node.path.split('/');
// Look-up for the parent node
let parentNode = tree.find(t => t.name === parentNodeName);
// If parent doesn't exist yet, so we create it here
if (!parentNode) {
parentNode = { name: parentNodeName, children: [] }
}
let children = parentNode.children;
// If the level of the node is relevant
// otherwise simply iterate over all pathElems
for(let i = 0; i <= node.level; i ++) {
let child = children.find(c => c.name === pathElems[i]);
// If the child doesn't exist yet - create it
if (!child) {
child = {
name: pathElems[i],
children: []
}
children.push(child);
children = child.children;
continue;
}
// Child does exist, so use it's children for the next iteration
children = child.children;
}
}
return tree;
}
And you can call this function, for example, in ngOnInit:
ngOnInit() {
this.tree = this.transform(this.data);
}
I do not use Angular, but if you just need to convert your flat to nested:
var data = [
{
expandable: true,
level: 0,
name: "2021-12-31",
path: null
},
{
expandable: false,
level: 2,
name: "A.txt",
path: "2021-12-31/B/C/A.txt"
}
]
var to_nested = function(flat) {
var nested = []
var cache = {}
var l = flat.length
var cache_assert = function(name) {
if (cache[name] == null) {
cache[name] = {
name: name,
children: []
}
}
}
for (var i = 0; i < l; i++) {
var current_node = flat[i]
cache_assert(current_node.name)
if (current_node.path == null) {
nested.push(cache[current_node.name])
} else {
var names = current_node.path.split("/")
var parent_name = names.shift()
cache_assert(parent_name)
names.forEach(function(name) {
cache_assert(name)
cache[parent_name].children.push(cache[name])
parent_name = name
})
}
}
return nested
}
var a = to_nested(data)
console.log('a: ', a)
console.log('a: ', a[0].children)
console.log('a: ', a[0].children[0].children)
And if you want to return to flat:
var level = 0
var cache = []; cache[level] = a.slice(0)
var parent = []; parent[level] = null
var index = []; index[level] = 0
while (level >= 0) {
var node = cache[level][index[level]]
if (node != null) {
console.log('node: ', node)
if (
node['children'] != null &&
Object.prototype.toString.call(node['children']) === '[object Array]' &&
node['children'].length
) {
level++
index[level] = 0
parent[level] = Object.assign({}, node)
delete parent[level]['children']
cache[level] = node['children'].slice(0)
} else {
index[level]++
}
} else {
parent[level] = null
level--
index[level]++
}
}

Need to convert the array of filepaths into treeview json object

Need to convert the array of file paths into Treeview JSON object
Array Data:
[path1/subpath1/file1.doc",
"path1/subpath1/file2.doc",
"path1/subpath2/file1.doc",
"path1/subpath2/file2.doc",
"path2/subpath1/file1.doc",
"path2/subpath1/file2.doc",
"path2/subpath2/file1.doc",
"path2/subpath2/file2.doc",
"path2/subpath2/additionalpath1/file1.doc"]
I want below object Result:
{
"title": "path1",
"childNodes" : [
{ "title":"subpath1", "childNodes":[{ "title":"file1.doc", "childNodes":[] }] },
{ "title":"subpath2", "childNodes":[{ "title":"file1.doc", "childNodes":[] }] }
]
}
I was able to convert it into an object using the below code snippet but not able to transform the way I want it
let treePath = {};
let formattedData = {};
data.forEach(path => {
let levels = path.split("/");
let file = levels.pop();
let prevLevel = treePath;
let prevProp = levels.shift();
levels.forEach(prop => {
prevLevel[prevProp] = prevLevel[prevProp] || {};
prevLevel = prevLevel[prevProp];
prevProp = prop;
});
prevLevel[prevProp] = (prevLevel[prevProp] || []).concat([file]);
});
How can i do this????
You could reduce the parts of pathes and search for same title.
const
pathes = ["path1/subpath1/file1.doc", "path1/subpath1/file2.doc", "path1/subpath2/file1.doc", "path1/subpath2/file2.doc", "path2/subpath1/file1.doc", "path2/subpath1/file2.doc", "path2/subpath2/file1.doc", "path2/subpath2/file2.doc", "path2/subpath2/additionalpath1/file1.doc"],
result = pathes.reduce((r, path) => {
path.split('/').reduce((childNodes, title) => {
let child = childNodes.find(n => n.title === title);
if (!child) childNodes.push(child = { title, childNodes: [] });
return child.childNodes;
}, r);
return r;
}, []);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

restructure json based on parent

I am studying the use of reduce in javascript, and I am trying to restructure an Array of Objects in a generic way - need to be dynamic.
flowchart - i get totaly lost
I started with this through.
Every ID becomes a Key.
Every PARENT identifies which Key it belongs to.
i have this:
const in = [
{
"id": "Ball",
"parent": "Futebol"
},
{
"id": "Nike",
"parent": "Ball"
},
{
"id": "Volley",
"parent": null
}
]
i want this
out = {
"Futebol": {
"Ball": {
"Nike": {}
}
},
"Volley": {}
}
i try it - and i had miserably failed.
const tree = require('./mock10.json')
// Every ID becomes a Key.
// Every PARENT identifies which Key it belongs to.
const parsedTree = {}
tree.reduce((acc, item) => {
if (parsedTree.hasOwnProperty(item.parent)){
if (parsedTree[`${item.parent}`].length > 0) {
parsedTree[`${item.parent}`][`${item.id}`] = {}
} else {
parsedTree[`${item.parent}`] = { [`${item.id}`]: {} }
}
} else {
// i get lost in logic
}
}, parsedTree)
console.log(parsedTree)
Got a working code for you, feel free to ask me about the implementation
Hope it helps :)
const arrSample = [
{
"id": "Ball",
"parent": "Futebol"
},
{
"id": "Nike",
"parent": "Ball"
},
{
"id": "Volley",
"parent": null
}
]
const buildTree = (arr) => {
return arr.reduce(([tree, treeMap], { id, parent }) => {
const val = {}
treeMap.set(id, val)
if (!parent) {
tree[id] = val
return [tree, treeMap]
}
if (!treeMap.has(parent)) {
const parentVal = { [id]: val }
treeMap.set(parent, parentVal)
tree[parent] = parentVal
return [tree, treeMap]
}
const newParentValue = treeMap.get(parent)
newParentValue[id] = val
treeMap.set(parent, newParentValue)
return [tree, treeMap]
}, [{}, new Map()])
}
const [result] = buildTree(arrSample)
console.log(JSON.stringify(result, 0, 2))
You could use reduce method for this and store each id on the first level of the object. This solution will work if the objects in the array are in the correct order as in the tree structure.
const data = [{"id":"Futebol","parent":null},{"id":"Ball","parent":"Futebol"},{"id":"Nike","parent":"Ball"},{"id":"Volley","parent":null}]
const result = data.reduce((r, { id, parent }) => {
if (!parent) {
r[id] = {}
r.tree[id] = r[id]
} else if (r[parent]) {
r[parent][id] = {}
r[id] = r[parent][id]
}
return r
}, {tree: {}}).tree
console.log(result)
If reduce solution is just an option, you can try this way:
var input = [
{
"id": "Ball",
"parent": "Futebol"
},
{
"id": "Nike",
"parent": "Ball"
},
{
"id": "Volley",
"parent": null
}
];
var output = {};
input.forEach(item => {
var temp = input.find(x => x.id === item.parent);
if (temp) {
temp[item.id] = {};
}
});
input = input.filter(item => !input.find(x => x.hasOwnProperty(item.id)));
input.forEach(item => {
if (!item.parent) {
output[item.id] = {};
} else {
for (var [id, value] of Object.entries(item)) {
if (typeof value === 'object') {
output[item.parent] = { [item.id]: { id: {} } };
}
}
}
})
console.log(output);
I have tried many things, but none works if we use an Array.prototype.reduce
As there are missing parents, and the elements are out of order, plus the fact that there can be an infinity of levels, I really do not believe that this question can be resolved with a simple reduce
This code should work whatever the cases :
- if all parents are not declared
- if there are infinitely many levels
- if they are in disorder
const origin =
[ { id: 'Ball', parent: 'Futebol' }
, { id: 'Nike', parent: 'Ball' }
, { id: 'Volley', parent: null }
, { id: 'lastOne', parent: 'level4' } // added
, { id: 'level4', parent: 'Nike' } // added
, { id: 'bis', parent: 'Nike' } // added
];
const Result = {} // guess who ?
, Parents = [] // tempory array to keep parents elements address by key names
;
let nbTodo = origin.length // need this one to verify number of elements to track
;
// set all the first levels, add a todo flags
origin.forEach(({id,parent},i,ori)=>
{
ori[i].todo = true // adding todo flag
if (parent===null)
{
Result[id] = {} // new first level element
ori[i].todo = false // one less :)
nbTodo--
Parents.push(({ref:id,path:Result[id]}) ) // I know who you are!
}
else if (origin.filter(el=>el.id===parent).length===0) // if he has no parent...
{
Result[parent] = {} // we create it one
Parents.push({ref:parent,path:Result[parent]} )
}
})
// to put the children back in their parents' arms
while(nbTodo>0) // while there are still some
{
origin.forEach(({id,parent,todo},i,ori)=> // little by little we find them all
{
if(todo) // got one !
{
let pos = Parents.find(p=>p.ref===parent) // have parent already been placed?
if(pos)
{
ori[i].todo = false // to be sure not to repeat yourself unnecessarily
nbTodo-- // one less :)
pos.path[id] = {} // and voila, parentage is done
Parents.push(({ref:id,path:pos.path[id]}) ) // he can now take on the role of parent
}
}
})
}
for (let i=origin.length;i--;) { delete origin[i].todo } // remove todo flags
console.log( JSON.stringify(Result, 0, 2) )
.as-console-wrapper { max-height: 100% !important; top: 0; }
I finaly made this one, based on this previous on, and done with a first step by a reduce...
to by pass the Array of Parents, I made a recursive function for searching each parent elements thru the levels of parsedTree result.
here is the code:
const Tree =
[ { id: 'Ball', parent: 'Futebol' }
, { id: 'Nike', parent: 'Ball' }
, { id: 'Volley', parent: null }
, { id: 'lastOne', parent: 'level4' } // added
, { id: 'level4', parent: 'Nike' } // added
, { id: 'bis', parent: 'Nike' } // added
];
const parsedTree = Tree.reduce((parTree, {id,parent},i ) => {
Tree[i].todo = false
if (parent===null)
{ parTree[id] = {} }
else if (Tree.filter(el=>el.id===parent).length===0) // if he has no parent...
{ parTree[parent] = { [id]: {} } }
else
{ Tree[i].todo = true }
return parTree
}, {})
function parsedTreeSearch(id, part) {
let rep = null
for(let kId in part) {
if (kId===id)
{ rep = part[kId] }
else if (Object.keys(part[kId]).length)
{ rep = parsedTreeSearch(id, part[kId]) }
if (rep) break
}
return rep
}
while (Boolean(Tree.find(t=>t.todo))) {
Tree.forEach(({id,parent,todo},i)=>{ // little by little we find them all
if (todo) {
let Pelm = parsedTreeSearch(parent, parsedTree)
if (Boolean(Pelm)) {
Pelm[id] = {}
Tree[i].todo = false
} } }) }
for (let i=Tree.length;i--;) { delete Tree[i].todo } // remove todo flags
console.log( JSON.stringify( parsedTree ,0,2))
.as-console-wrapper { max-height: 100% !important; top: 0; }

Create a object i an object based on the array of string value

I need to update the object name based on the array of the string value and the last string value should be an array.
I use array.forEach loop but I don't know how to find the object inside an object if it exists and the myArray contain around 10,000 strings.
const myArray = [
'/unit/unit/225/unit-225.pdf',
'/nit/nit-dep/4.11/nit-4.11.pdf',
'/nit/nit-dep/4.12/nit-4.12.pdf',
'/org/viti/viti-engine/5.1/viti-engine-5.1.pdf',
'/org/viti/viti-spring/5.1/viti-spring-5.1.pdf'
];
var parentObject = {}
myArray.forEach(res => {
res = res.slice(1, res.length);
var array = res.split("/");
array.forEach((e, i) => {
........ // here I am confused
});
})
final output should be
parentObject = {
'unit': {
'unit': {
'225': {
'unit-225.pdf': []
}
}
},
'nit': {
'nit-dep': {
'4.11': {
'nit-4.11.pdf': []
},
'4.12': {
'nit-4.12.pdf': []
}
}
},
'org': {
'viti': {
'viti-engine': {
'5.1': {
'viti-engine-5.1.pdf': []
}
},
'viti-spring': {
'5.2': {
'viti-engine-5.2.pdf': []
}
}
}
}
}
Once you've split by slashes, use reduce to iterate to the nested object, creating each nested property first if necessary, then assign an array to the filename property:
const myArray = [
'/unit/unit/225/unit-225.pdf',
'/nit/nit-dep/4.11/nit-4.11.pdf',
'/nit/nit-dep/4.12/nit-4.12.pdf',
'/org/viti/viti-engine/5.1/viti-engine-5.1.pdf',
'/org/viti/viti-spring/5.1/viti-spring-5.1.pdf'
];
var parentObject = {}
myArray.forEach((str) => {
const props = str.slice(1).split('/');
const filename = props.pop();
const lastObj = props.reduce((a, prop) => {
if (!a[prop]) {
a[prop] = {};
}
return a[prop];
}, parentObject);
lastObj[filename] = [];
});
console.log(parentObject);
You could reduce the array an reduce the path as well. At the end assign the array.
const
array = ['/unit/unit/225/unit-225.pdf', '/nit/nit-dep/4.11/nit-4.11.pdf', '/nit/nit-dep/4.12/nit-4.12.pdf', '/org/viti/viti-engine/5.1/viti-engine-5.1.pdf', '/org/viti/viti-spring/5.1/viti-spring-5.1.pdf'],
result = array.reduce((r, path) => {
var keys = path.split(/\//).slice(1),
last = keys.pop();
keys.reduce((o, k) => o[k] = o[k] || {}, r)[last] = [];
return r;
}, {});
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
A slightly faster approach.
const
array = ['/unit/unit/225/unit-225.pdf', '/nit/nit-dep/4.11/nit-4.11.pdf', '/nit/nit-dep/4.12/nit-4.12.pdf', '/org/viti/viti-engine/5.1/viti-engine-5.1.pdf', '/org/viti/viti-spring/5.1/viti-spring-5.1.pdf'],
result = {};
for (let path of array) {
let keys = path.split(/\//).slice(1),
last = keys.pop(),
temp = result;
for (let key of keys) {
temp[key] = temp[key] || {};
temp = temp[key];
}
temp[last] = [];
}
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
You could also take a recursive approach.
Just keep shifting the split-up path until you get the final assignment for each branch.
const myArray = [
'/unit/unit/225/unit-225.pdf',
'/nit/nit-dep/4.11/nit-4.11.pdf',
'/nit/nit-dep/4.12/nit-4.12.pdf',
'/org/viti/viti-engine/5.1/viti-engine-5.1.pdf',
'/org/viti/viti-spring/5.1/viti-spring-5.1.pdf'
];
console.log(buildTree(myArray));
function buildTree(list=[]) {
return list.reduce((node, item) => buildBranches(node, item.split(/\//g).filter(x => x !== '')), {});
}
function buildBranches(node={}, rest=[]) {
let key = rest.shift();
node[key] = rest.length < 2 ? { [rest.shift()] : [] } /** or rest.shift() */ : node[key] || {};
if (rest.length > 1) buildBranches(node[key], rest);
return node;
}
.as-console-wrapper { top: 0; max-height: 100% !important; }

Categories