Develop Reference

How to map according to key on objects?

I'm trying to map through object values and add text if the key is right on JavaScript. Here is our object:
{
"id": "n27",
"name": "Thomas More",
"className": "level-1",
"children": [
{
"id": "n1",
"name": "Rousseau",
"className": "level-2",
"children": [
{
"id": "n2",
"name": "Machiavelli",
"className": "level-3",
"children": [
{
"id": "n9",
"name": "Edison, Thomas",
"className": "level-4"
}
]
}
]
},
{
"id": "n3",
"name": "Einstein",
"className": "level-2",
"children": [
{
"id": "n10",
"name": "Arf, Cahit",
"className": "level-3",
"children": [
{
"id": "n15",
"name": "Rawls, John",
"className": "level-4"
}
]
},
{
"id": "n12",
"name": "Smith, Adam",
"className": "level-3",
"children": [
{
"id": "n11",
"name": "Kant, Immanuel",
"className": "level-4"
}
]
}
]
},
{
"id": "n60",
"name": "Turing, Alan",
"className": "level-2"
}
]
}
I want to add " YES" to their className's. So new object should look like this:
{
"id": "n27",
"name": "Thomas More",
"className": "level-1 YES",
"children": [
{
"id": "n1",
"name": "Rousseau",
"className": "level-2 YES",
"children": [
{
"id": "n2",
"name": "Machiavelli",
"className": "level-3 YES",
"children": [
{
"id": "n9",
"name": "Edison, Thomas",
"className": "level-4 YES"
}
]
}
]
},
{
"id": "n3",
"name": "Einstein",
"className": "level-2 YES",
"children": [
{
"id": "n10",
"name": "Arf, Cahit",
"className": "level-3 YES",
"children": [
{
"id": "n15",
"name": "Rawls, John",
"className": "level-4 YES"
}
]
},
{
"id": "n12",
"name": "Smith, Adam",
"className": "level-3 YES",
"children": [
{
"id": "n11",
"name": "Kant, Immanuel",
"className": "level-4 YES"
}
]
}
]
},
{
"id": "n60",
"name": "Turing, Alan",
"className": "level-2 YES"
}
]
}
I have tried this, but it adds to all of the keys:
const addToClassName = (datasource, fn) => {
return Object.fromEntries(Object
.entries(datasource, fn)
.map(([k, v]) => [k, v && v.children != undefined && v.children.length > 0 ? addToClassName(v.children, fn) : fn(v)])
);
}
let res = addToClassName(obj, v => v + ' YEP');
How can I do it?

You don't need to use Object.fromEntries(), instead, you make your function return a new object, with a transformed className based on the return value of fn. You can then set the children: key on the object to be a mapped version of all the objects inside of the children array. When mapping, you can pass each child into the recursive call to your addToClassName() function. You can add the children key conditionally to the output object but checking if it exists (with children &&) and then by spreading the result using the spread syntax ...:
const data = { "id": "n27", "name": "Thomas More", "className": "level-1", "children": [ { "id": "n1", "name": "Rousseau", "className": "level-2", "children": [ { "id": "n2", "name": "Machiavelli", "className": "level-3", "children": [ { "id": "n9", "name": "Edison, Thomas", "className": "level-4" } ] } ] }, { "id": "n3", "name": "Einstein", "className": "level-2", "children": [ { "id": "n10", "name": "Arf, Cahit", "className": "level-3", "children": [ { "id": "n15", "name": "Rawls, John", "className": "level-4" } ] }, { "id": "n12", "name": "Smith, Adam", "className": "level-3", "children": [ { "id": "n11", "name": "Kant, Immanuel", "className": "level-4" } ] } ] }, { "id": "n60", "name": "Turing, Alan", "className": "level-2" } ] };
const addToClassName = (obj, fn) => ({
...obj,
className: fn(obj.className),
...(obj.children && {children: obj.children.map(child => addToClassName(child, fn))})
});
console.log(addToClassName(data, v => v + " YES"));

If you can change the current obj object then you can achieve this using recursion as
function addClass(obj) {
obj.className += " YES";
obj.children && obj.children.forEach(addClass);
}
const obj = {
id: "n27",
name: "Thomas More",
className: "level-1",
children: [
{
id: "n1",
name: "Rousseau",
className: "level-2",
children: [
{
id: "n2",
name: "Machiavelli",
className: "level-3",
children: [
{
id: "n9",
name: "Edison, Thomas",
className: "level-4",
},
],
},
],
},
{
id: "n3",
name: "Einstein",
className: "level-2",
children: [
{
id: "n10",
name: "Arf, Cahit",
className: "level-3",
children: [
{
id: "n15",
name: "Rawls, John",
className: "level-4",
},
],
},
{
id: "n12",
name: "Smith, Adam",
className: "level-3",
children: [
{
id: "n11",
name: "Kant, Immanuel",
className: "level-4",
},
],
},
],
},
{
id: "n60",
name: "Turing, Alan",
className: "level-2",
},
],
};
function addClass(obj) {
obj.className += " YES";
obj.children && obj.children.forEach(addClass);
}
addClass(obj);
console.log(obj);

You can use lodash, if don't mind.
const _ = require('lodash');
const data = { "id": "n27", "name": "Thomas More", "className": "level-1", "children": [ { "id": "n1", "name": "Rousseau", "className": "level-2", "children": [ { "id": "n2", "name": "Machiavelli", "className": "level-3", "children": [ { "id": "n9", "name": "Edison, Thomas", "className": "level-4" } ] } ] }, { "id": "n3", "name": "Einstein", "className": "level-2", "children": [ { "id": "n10", "name": "Arf, Cahit", "className": "level-3", "children": [ { "id": "n15", "name": "Rawls, John", "className": "level-4" } ] }, { "id": "n12", "name": "Smith, Adam", "className": "level-3", "children": [ { "id": "n11", "name": "Kant, Immanuel", "className": "level-4" } ] } ] }, { "id": "n60", "name": "Turing, Alan", "className": "level-2" } ] };
const newData= _.cloneDeepWith(data, (val, key) => (
(key === 'className') ? `${val} YES` : _.noop()
));
console.log(newData);
// {
// id: 'n27',
// name: 'Thomas More',
// className: 'level-1 YES',
// ...
// }

Change Array to Object with recursives

i have an array shared below. I need to change this array like an object. I tried something but cant make it. I Want to make like this with foreach or recursive functions.
let nodes= [
{ id: 1, name: "Denny Curtis", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg" },
{ id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://cdn.balkan.app/shared/3.jpg" },
{ id: 3, pid: 1, name: "Caden Ellison", title: "Dev Manager", img: "https://cdn.balkan.app/shared/4.jpg" }
];
let newObj = {
"id": 1,
"name": "Denny Curtis",
"title": "CEO",
"img": "https://cdn.balkan.app/shared/2.jpg",
"children": [
{
"id": 2,
"pid": 1,
"name": "Ashley Barnett",
"title": "Sales Manager",
"img": "https://cdn.balkan.app/shared/3.jpg",
"children": [
{
"id": 4,
"pid": 2,
"name": "Elliot Patel",
"title": "Sales",
"img": "https://cdn.balkan.app/shared/5.jpg"
},
{
"id": 5,
"pid": 2,
"name": "Lynn Hussain",
"title": "Sales",
"img": "https://cdn.balkan.app/shared/6.jpg"
}
]
}
]
}
Thank you from now.

It would probably be better to make an array of users with the children related to them.
let nodes = [{
id: 1,
name: "Denny Curtis",
title: "CEO",
img: "https://cdn.balkan.app/shared/2.jpg"
},
{
id: 2,
pid: 1,
name: "Ashley Barnett",
title: "Sales Manager",
img: "https://cdn.balkan.app/shared/3.jpg"
},
{
id: 3,
pid: 1,
name: "Caden Ellison",
title: "Dev Manager",
img: "https://cdn.balkan.app/shared/4.jpg"
}
];
let newNodeArray = [];
nodes.forEach(node=>{
newNodeArray.push({...node,children: nodes.filter(filterNode => filterNode.pid === node.id )});
});
console.log(JSON.stringify(newNodeArray));
The outcome of this one would look like:
[
{
"id":1,
"name":"Denny Curtis",
"title":"CEO",
"img":"https://cdn.balkan.app/shared/2.jpg",
"children":[
{
"id":2,
"pid":1,
"name":"Ashley Barnett",
"title":"Sales Manager",
"img":"https://cdn.balkan.app/shared/3.jpg"
},
{
"id":3,
"pid":1,
"name":"Caden Ellison",
"title":"Dev Manager",
"img":"https://cdn.balkan.app/shared/4.jpg"
}
]
},
{
"id":2,
"pid":1,
"name":"Ashley Barnett",
"title":"Sales Manager",
"img":"https://cdn.balkan.app/shared/3.jpg",
"children":[]
},
{
"id":3,
"pid":1,
"name":"Caden Ellison",
"title":"Dev Manager",
"img":"https://cdn.balkan.app/shared/4.jpg",
"children":[]
}
]
//This is how you would do it if you want the response to be an object
let nodeObject = {...nodes.filter(node=>!node.pid)[0],children:[]};
nodeObject.children = nodes.filter(node=>nodeObject.id === node.pid);
nodeObject.children = nodeObject.children.map(node=>({...node,children: nodes.filter(filterNode=>node.id === filterNode.pid)}));
console.log(nodeObject);
// The Response for this would be:
{
"id": 1,
"name": "Denny Curtis",
"title": "CEO",
"img": "https://cdn.balkan.app/shared/2.jpg",
"children": [{
"id": 2,
"pid": 1,
"name": "Ashley Barnett",
"title": "Sales Manager",
"img": "https://cdn.balkan.app/shared/3.jpg",
"children": [{
"id": 4,
"pid": 2,
"name": "Caden Ellison",
"title": "Sales",
"img": "https://cdn.balkan.app/shared/4.jpg"
}]
}, {
"id": 3,
"pid": 1,
"name": "Caden Ellison",
"title": "Dev Manager",
"img": "https://cdn.balkan.app/shared/4.jpg",
"children": []
}]
}

Add new property in object recursively

I have a recursive array with same structure of objects and it contains name property. My requirement is to add new property id along with name in recursive array of objects
below is my sample array
[
{
"children": [
{
"children": [
{
"children": [
{
"children": [],
"name": "ID01",
"type": "Under"
},
{
"children": [],
"name": "ID02",
"type": "Under"
}
],
"name": "httpgateway",
"type": "Gut"
},
{
"children": [
{
"children": [],
"name": "mock1",
"type": "Under"
},
{
"children": [],
"name": "mock2",
"type": "Under"
}
],
"name": "mock",
"type": "Gut"
}
],
"name": "23131",
"type": "SEV"
}
],
"name": "integration",
"type": "DataCenter"
},
{
"children": [
{
"children": [
{
"children": [
{
"children": [],
"name": "data1",
"type": "Under"
},
{
"children": [],
"name": "data12",
"type": "Under"
},
{
"children": [],
"name": "data13",
"type": "Under"
},
{
"children": [],
"name": "data14",
"type": "Under"
}
],
"name": "Gut1",
"type": "Gut"
}
],
"name": "213213",
"type": "SEV"
}
],
"name": "dev",
"type": "dt"
}
]
I need Id property along with name as belo
[
{
"children": [
{
"children": [
{
"children": [
{
"children": [],
"name": "ID01",
"id": "ID01",
"type": "Under"
},
{
"children": [],
"name": "ID02",
"id": "ID02",
"type": "Under"
}
],
"name": "gate",
"id": "gate",
"type": "Gut"
},
{
"children": [
{
"children": [],
"name": "mock1",
"id": "mock1",
"type": "Under"
},
{
"children": [],
"name": "mock2",
"id": "mock2",
"type": "Under"
}
],
"name": "mock",
"name": "id",
"type": "Gut"
}
],
"name": "23131",
"id": "23131",
"type": "SEV"
}
],
"name": "int",
"id": "int",
"type": "dt"
},
{
"children": [
{
"children": [
{
"children": [
{
"children": [],
"name": "data1",
"id": "data1",
"type": "Under"
},
{
"children": [],
"name": "data12",
"id": "data12",
"type": "Under"
}
],
"name": "Gut1",
"id": "Gut1",
"type": "Gut"
}
],
"name": "213213",
"id": "213213",
"type": "SEV"
}
],
"name": "dev",
"id": "dev",
"type": "dt"
}
]
I have written method to update this but its not working as expected
const getTreeItemsFromData = (treeItems) => {
console.log('---------------------------', treeItems)
let finalData = []
return treeItems.map((treeItemData) => {
let children = undefined;
if (treeItemData.children && treeItemData.children.length > 0) {
children = this.getTreeItemsFromData(treeItemData.children);
}
let uniqueId = `${treeItemData.name}${Math.floor(Math.random()*(999-100+1)+100)}`;
finalData.push(treeItemData)
console.log("-- ------------------", treeItemData)
});
};

You jus need a function to accept the array and check if the key children exists and is array, make changes to it and then recursively call if it has children.
const t = [
{
"children": [
{
"children": [
{
"children": [
{
"children": [
],
"name": "data1",
"type": "Under"
},
{
"children": [
],
"name": "data12",
"type": "Under"
},
{
"children": [
],
"name": "data13",
"type": "Under"
},
{
"children": [
],
"name": "data14",
"type": "Under"
}
],
"name": "Gut1",
"type": "Gut"
}
],
"name": "213213",
"type": "SEV"
}
],
"name": "dev",
"type": "dt"
}
];
function addIdRec(arr){
arr.forEach(a => {
if(a.children instanceof Array){
a.id = a.name;
if(a.children.length > 0){
addIdRec(a.children);
}
}
})
}
addIdRec(t)

We can do this with a pretty simple recursion:
const addId = (data) =>
data .map (({name, children, ...rest}) =>
({children: addId(children), name, id: name, ...rest})
)
const data = [{children: [{children: [{children: [{children: [], name: "ID01", type: "Under"}, {children: [], name: "ID02", type: "Under"}], name: "httpgateway", type: "Gut"}, {children: [{children: [], name: "mock1", type: "Under"}, {children: [], name: "mock2", type: "Under"}], name: "mock", type: "Gut"}], name: "23131", type: "SEV"}], name: "integration", type: "DataCenter"}, {children: [{children: [{children: [{children: [], name: "data1", type: "Under"}, {children: [], name: "data12", type: "Under"}, {children: [], name: "data13", type: "Under"}, {children: [], name: "data14", type: "Under"}], name: "Gut1", type: "Gut"}], name: "213213", type: "SEV"}], name: "dev", type: "dt"}]
console .log (addId (data))
.as-console-wrapper {max-height: 100% !important; top: 0}
We simply clone the node, adding an id property to match the name one and recur on the children property.

Deep Flatten JavaScript Object Recursively

Data:
var data = [
{
"id": 1,
"level": "1",
"text": "Sammy",
"type": "Item",
"items": [
{
"id": 11,
"level": "2",
"text": "Table",
"type": "Item",
"items": [
{
"id": 111,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 112,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
}
]
},
{
"id": 12,
"level": "2",
"text": "Chair",
"type": "Item",
"items": [
{
"id": 121,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 122,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
}
]
}
]
},
{
"id": 2,
"level": "1",
"text": "Sundy",
"type": "Item",
"items": [
{
"id": 21,
"level": "2",
"text": "MTable",
"type": "Item",
"items": [
{
"id": 211,
"level": "3",
"text": "MTDog",
"type": "Item",
"items": null
},
{
"id": 212,
"level": "3",
"text": "MTCat",
"type": "Item",
"items": null
}
]
},
{
"id": 22,
"level": "2",
"text": "MChair",
"type": "Item",
"items": [
{
"id": 221,
"level": "3",
"text": "MCDog",
"type": "Item",
"items": null
},
{
"id": 222,
"level": "3",
"text": "MCCat",
"type": "Item",
"items": null
}
]
}
]
},
{
"id": 3,
"level": "1",
"text": "Bruce",
"type": "Folder",
"items": [
{
"id": 31,
"level": "2",
"text": "BTable",
"type": "Item",
"items": [
{
"id": 311,
"level": "3",
"text": "BTDog",
"type": "Item",
"items": null
},
{
"id": 312,
"level": "3",
"text": "BTCat",
"type": "Item",
"items": null
}
]
},
{
"id": 32,
"level": "2",
"text": "Chair",
"type": "Item",
"items": [
{
"id": 321,
"level": "3",
"text": "BCDog",
"type": "Item",
"items": null
},
{
"id": 322,
"level": "3",
"text": "BCCat",
"type": "Item",
"items": null
}
]
}
]
}
];
Code:
var fdr = [];
var fd = function(n) {
if (n.items) {
_.forEach(n.items, function (value){
fd(value);
});
}
fdr.push(n);
};
_.forEach(data, fd);
console.log(fdr);
Desired output:
var data = [
{
"id": 1,
"level": "1",
"text": "Sammy",
"type": "Item",
"items": []
},
{
"id": 11,
"level": "2",
"text": "Table",
"type": "Item",
"items": []
},
{
"id": 111,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 112,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
},
{
"id": 12,
"level": "2",
"text": "Chair",
"type": "Item",
"items": []
},
{
"id": 121,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 122,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
},
{
"id": 2,
"level": "1",
"text": "Sundy",
"type": "Item",
"items": []
},
{
"id": 21,
"level": "2",
"text": "MTable",
"type": "Item",
"items": []
},
{
"id": 211,
"level": "3",
"text": "MTDog",
"type": "Item",
"items": null
},
{
"id": 212,
"level": "3",
"text": "MTCat",
"type": "Item",
"items": null
},
{
"id": 22,
"level": "2",
"text": "MChair",
"type": "Item",
"items": []
},
{
"id": 221,
"level": "3",
"text": "MCDog",
"type": "Item",
"items": null
},
{
"id": 222,
"level": "3",
"text": "MCCat",
"type": "Item",
"items": null
},
{
"id": 3,
"level": "1",
"text": "Bruce",
"type": "Folder",
"items": []
},
{
"id": 31,
"level": "2",
"text": "BTable",
"type": "Item",
"items": []
},
{
"id": 311,
"level": "3",
"text": "BTDog",
"type": "Item",
"items": null
},
{
"id": 312,
"level": "3",
"text": "BTCat",
"type": "Item",
"items": null
},
{
"id": 32,
"level": "2",
"text": "Chair",
"type": "Item",
"items": []
},
{
"id": 321,
"level": "3",
"text": "BCDog",
"type": "Item",
"items": null
},
{
"id": 322,
"level": "3",
"text": "BCCat",
"type": "Item",
"items": null
}
];
Conditions:
Object have unknowns level. Some child item may have one level down and some could have up to 5.
Questions
The fd function in the code is what I have come up with. I believe there's a 'cleaner' way to do this, just can't think of something. Plus, the function return items object, render it circular object.
JsBin:
http://jsbin.com/debojiqove/2/edit?html,js,output
Is there a way to flatten object recursively with lodash or just plain JavaScript?.

A solution in plain Javascript with respect to the items. It does not mutate the source array.
function flat(r, a) {
var b = {};
Object.keys(a).forEach(function (k) {
if (k !== 'items') {
b[k] = a[k];
}
});
r.push(b);
if (Array.isArray(a.items)) {
b.items = a.items.map(function (a) { return a.id; });
return a.items.reduce(flat, r);
}
return r;
}
var data = [{ "id": 1, "level": "1", "text": "Sammy", "type": "Item", "items": [{ "id": 11, "level": "2", "text": "Table", "type": "Item", "items": [{ "id": 111, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 112, "level": "3", "text": "Cat", "type": "Item", "items": null }] }, { "id": 12, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 121, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 122, "level": "3", "text": "Cat", "type": "Item", "items": null }] }] }, { "id": 2, "level": "1", "text": "Sundy", "type": "Item", "items": [{ "id": 21, "level": "2", "text": "MTable", "type": "Item", "items": [{ "id": 211, "level": "3", "text": "MTDog", "type": "Item", "items": null }, { "id": 212, "level": "3", "text": "MTCat", "type": "Item", "items": null }] }, { "id": 22, "level": "2", "text": "MChair", "type": "Item", "items": [{ "id": 221, "level": "3", "text": "MCDog", "type": "Item", "items": null }, { "id": 222, "level": "3", "text": "MCCat", "type": "Item", "items": null }] }] }, { "id": 3, "level": "1", "text": "Bruce", "type": "Folder", "items": [{ "id": 31, "level": "2", "text": "BTable", "type": "Item", "items": [{ "id": 311, "level": "3", "text": "BTDog", "type": "Item", "items": null }, { "id": 312, "level": "3", "text": "BTCat", "type": "Item", "items": null }] }, { "id": 32, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 321, "level": "3", "text": "BCDog", "type": "Item", "items": null }, { "id": 322, "level": "3", "text": "BCCat", "type": "Item", "items": null }] }] }];
document.write('<pre>' + JSON.stringify(data.reduce(flat, []), 0, 4) + '</pre>');

With a bit of ES6 flavor
function flatten(xs) {
return xs.reduce((acc, x) => {
acc = acc.concat(x);
if (x.items) {
acc = acc.concat(flatten(x.items));
x.items = [];
}
return acc;
}, []);
}

Using _.flatMapDeep (available since Lodash 4.7):
var flatten = function(item) {
return [item, _.flatMapDeep(item.items, flatten)];
}
var result = _.flatMapDeep(data, flatten);

A shorter solution using reduce and recursion
function flatten(data){
return data.reduce(function(result,next){
result.push(next);
if(next.items){
result = result.concat(flatten(next.items));
next.items = [];
}
return result;
},[]);
}
var data = [
{
"id": 1,
"level": "1",
"text": "Sammy",
"type": "Item",
"items": [
{
"id": 11,
"level": "2",
"text": "Table",
"type": "Item",
"items": [
{
"id": 111,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 112,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
}
]
},
{
"id": 12,
"level": "2",
"text": "Chair",
"type": "Item",
"items": [
{
"id": 121,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 122,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
}
]
}
]
},
{
"id": 2,
"level": "1",
"text": "Sundy",
"type": "Item",
"items": [
{
"id": 21,
"level": "2",
"text": "MTable",
"type": "Item",
"items": [
{
"id": 211,
"level": "3",
"text": "MTDog",
"type": "Item",
"items": null
},
{
"id": 212,
"level": "3",
"text": "MTCat",
"type": "Item",
"items": null
}
]
},
{
"id": 22,
"level": "2",
"text": "MChair",
"type": "Item",
"items": [
{
"id": 221,
"level": "3",
"text": "MCDog",
"type": "Item",
"items": null
},
{
"id": 222,
"level": "3",
"text": "MCCat",
"type": "Item",
"items": null
}
]
}
]
},
{
"id": 3,
"level": "1",
"text": "Bruce",
"type": "Folder",
"items": [
{
"id": 31,
"level": "2",
"text": "BTable",
"type": "Item",
"items": [
{
"id": 311,
"level": "3",
"text": "BTDog",
"type": "Item",
"items": null
},
{
"id": 312,
"level": "3",
"text": "BTCat",
"type": "Item",
"items": null
}
]
},
{
"id": 32,
"level": "2",
"text": "Chair",
"type": "Item",
"items": [
{
"id": 321,
"level": "3",
"text": "BCDog",
"type": "Item",
"items": null
},
{
"id": 322,
"level": "3",
"text": "BCCat",
"type": "Item",
"items": null
}
]
}
]
}
];
var result = flatten(data);
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

Plain JavaScript
var data = [{ "id": 1, "level": "1", "text": "Sammy", "type": "Item", "items": [{ "id": 11, "level": "2", "text": "Table", "type": "Item", "items": [{ "id": 111, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 112, "level": "3", "text": "Cat", "type": "Item", "items": null }] }, { "id": 12, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 121, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 122, "level": "3", "text": "Cat", "type": "Item", "items": null }] }] }, { "id": 2, "level": "1", "text": "Sundy", "type": "Item", "items": [{ "id": 21, "level": "2", "text": "MTable", "type": "Item", "items": [{ "id": 211, "level": "3", "text": "MTDog", "type": "Item", "items": null }, { "id": 212, "level": "3", "text": "MTCat", "type": "Item", "items": null }] }, { "id": 22, "level": "2", "text": "MChair", "type": "Item", "items": [{ "id": 221, "level": "3", "text": "MCDog", "type": "Item", "items": null }, { "id": 222, "level": "3", "text": "MCCat", "type": "Item", "items": null }] }] }, { "id": 3, "level": "1", "text": "Bruce", "type": "Folder", "items": [{ "id": 31, "level": "2", "text": "BTable", "type": "Item", "items": [{ "id": 311, "level": "3", "text": "BTDog", "type": "Item", "items": null }, { "id": 312, "level": "3", "text": "BTCat", "type": "Item", "items": null }] }, { "id": 32, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 321, "level": "3", "text": "BCDog", "type": "Item", "items": null }, { "id": 322, "level": "3", "text": "BCCat", "type": "Item", "items": null }] }] }];
var r = [];
function flatten(a) {
if (a.length == 0) return;
var o = {};
o.id = a[0].id;
o.level = a[0].level;
o.text = a[0].text;
o.type = a[0].type
o.items = a[0].items == null ? null : []
r.push(o);
if (Array.isArray(a[0].items)) {
flatten(a[0].items);
}
a.shift();
flatten(a);
}
flatten(data);
document.write('<pre>' + JSON.stringify(r, 0, 2) + '</pre>');

Here is solution using recursive function which I called flattenNestedObjectsArray()(for native JavaScript):
function flattenNestedObjectsArray(arr, part){
var flattened = part || [], items;
arr.forEach(function(v){
if (Array.isArray(v.items) && v.items.length) {
items = v.items;
v.items = [];
flattened.push(v);
flattened.concat(flattened, flattenNestedObjectsArray(items, flattened));
} else {
flattened.push(v);
}
});
return flattened;
}
var flattened = flattenNestedObjectsArray(data);
console.log(JSON.stringify(flattened, 0, 4));
The console.log output:
[
{
"id": 1,
"level": "1",
"text": "Sammy",
"type": "Item",
"items": []
},
{
"id": 11,
"level": "2",
"text": "Table",
"type": "Item",
"items": []
},
{
"id": 111,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 112,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
},
{
"id": 12,
"level": "2",
"text": "Chair",
"type": "Item",
"items": []
},
{
"id": 121,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 122,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
},
{
"id": 2,
"level": "1",
"text": "Sundy",
"type": "Item",
"items": []
},
{
"id": 21,
"level": "2",
"text": "MTable",
"type": "Item",
"items": []
},
{
"id": 211,
"level": "3",
"text": "MTDog",
"type": "Item",
"items": null
},
{
"id": 212,
"level": "3",
"text": "MTCat",
"type": "Item",
"items": null
},
{
"id": 22,
"level": "2",
"text": "MChair",
"type": "Item",
"items": []
},
{
"id": 221,
"level": "3",
"text": "MCDog",
"type": "Item",
"items": null
},
{
"id": 222,
"level": "3",
"text": "MCCat",
"type": "Item",
"items": null
},
{
"id": 3,
"level": "1",
"text": "Bruce",
"type": "Folder",
"items": []
},
{
"id": 31,
"level": "2",
"text": "BTable",
"type": "Item",
"items": []
},
{
"id": 311,
"level": "3",
"text": "BTDog",
"type": "Item",
"items": null
},
{
"id": 312,
"level": "3",
"text": "BTCat",
"type": "Item",
"items": null
},
{
"id": 32,
"level": "2",
"text": "Chair",
"type": "Item",
"items": []
},
{
"id": 321,
"level": "3",
"text": "BCDog",
"type": "Item",
"items": null
},
{
"id": 322,
"level": "3",
"text": "BCCat",
"type": "Item",
"items": null
}
]

I needed to do the same thing, and while solving my issue found a solution to yours using lodash:
function kids(node) {
return node.items
? [{...node, items: []}, _.map(node.items, kids)]
: {...node, items: null};
}
_.flatMapDeep(data, kids);

Here is my version of the recursive flattenItems function.
Note that I have removed the items property at all levels in the final result.
function flattenItems(data) {
// flat is the array that we will return by the end
var flat = [];
data.forEach(function(item) {
// get child properties only
var flatItem = {};
Object.keys(item).forEach(function(key) {
if(item[key] && item.hasOwnProperty(key) && !Array.isArray(item[key])) {
flatItem[key] = item[key];
}
// recursive flattern on subitems
// add recursive call results to the
// current stack version of "flat", by merging arrays
else if(Array.isArray(item[key])) {
Array.prototype.push.apply(flat, flattenItems(item[key]));
}
});
flat.push(flatItem);
});
// sort by level before returning
return flat.sort(function(i1, i2) {
return parseInt(i1.level) - parseInt(i2.level);
});
}
Here is a fiddle using your sample data, check the console.

Only a single liner function can do this job.
var data = [{ "id": 1, "level": "1", "text": "Sammy", "type": "Item", "items": [{ "id": 11, "level": "2", "text": "Table", "type": "Item", "items": [{ "id": 111, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 112, "level": "3", "text": "Cat", "type": "Item", "items": null }] }, { "id": 12, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 121, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 122, "level": "3", "text": "Cat", "type": "Item", "items": null }] }] }, { "id": 2, "level": "1", "text": "Sundy", "type": "Item", "items": [{ "id": 21, "level": "2", "text": "MTable", "type": "Item", "items": [{ "id": 211, "level": "3", "text": "MTDog", "type": "Item", "items": null }, { "id": 212, "level": "3", "text": "MTCat", "type": "Item", "items": null }] }, { "id": 22, "level": "2", "text": "MChair", "type": "Item", "items": [{ "id": 221, "level": "3", "text": "MCDog", "type": "Item", "items": null }, { "id": 222, "level": "3", "text": "MCCat", "type": "Item", "items": null }] }] }, { "id": 3, "level": "1", "text": "Bruce", "type": "Folder", "items": [{ "id": 31, "level": "2", "text": "BTable", "type": "Item", "items": [{ "id": 311, "level": "3", "text": "BTDog", "type": "Item", "items": null }, { "id": 312, "level": "3", "text": "BTCat", "type": "Item", "items": null }] }, { "id": 32, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 321, "level": "3", "text": "BCDog", "type": "Item", "items": null }, { "id": 322, "level": "3", "text": "BCCat", "type": "Item", "items": null }] }] }],
flatIron = (a,b) => a.reduce((p,c) => {!!c.items ? (p.push(c), flatIron(c.items,p), c.items = []) : p.push(c); return p},b),
flatArr = flatIron(data,[]);
document.write('<pre>' + JSON.stringify(flatArr, 0, 2) + '</pre>');

another way with recursive reducer function
_.reduce(data, function reducer(result, val) {
var items = _.reduce(val.items, reducer, []);
val.items = _.isArray(val.items) ? [] : val.items;
return _.concat(result, val, items);
}, []);

Modified Роман Парадеев answer to make it somewhat more dynamic.
function flatten(xs, childSelector) {
return xs.reduce((acc, x) => {
acc = acc.concat(x);
let children = childSelector(x);
if (children) {
acc = acc.concat(flatten(children, childSelector));
}
return acc;
}, []);
}
Now items is not hardcoded, and you can use it flatten(data, x => x.items).

Since Lo-Dash 3.0.0, _.flattenDeep(data) will return a deeply flattened array as you desire. There is also a _.flatten(data) function that flattens shallowly.

Since this older question has been brought back up, here is a modern version. It does not mutate (#Nina Scholz: or mutilate!) the original data, but returns a new array containing new objects.
const flattenItems = (xs) =>
xs. flatMap (({items, ... node}) => [node, ... flattenItems (items || [])])
const data = [{id: 1, level: "1", text: "Sammy", type: "Item", items: [{id: 11, level: "2", text: "Table", type: "Item", items: [{id: 111, level: "3", text: "Dog", type: "Item", items: null}, {id: 112, level: "3", text: "Cat", type: "Item", items: null}]}, {id: 12, level: "2", text: "Chair", type: "Item", items: [{id: 121, level: "3", text: "Dog", type: "Item", items: null}, {id: 122, level: "3", text: "Cat", type: "Item", items: null}]}]}, {id: 2, level: "1", text: "Sundy", type: "Item", items: [{id: 21, level: "2", text: "MTable", type: "Item", items: [{id: 211, level: "3", text: "MTDog", type: "Item", items: null}, {id: 212, level: "3", text: "MTCat", type: "Item", items: null}]}, {id: 22, level: "2", text: "MChair", type: "Item", items: [{id: 221, level: "3", text: "MCDog", type: "Item", items: null}, {id: 222, level: "3", text: "MCCat", type: "Item", items: null}]}]}, {id: 3, level: "1", text: "Bruce", type: "Folder", items: [{id: 31, level: "2", text: "BTable", type: "Item", items: [{id: 311, level: "3", text: "BTDog", type: "Item", items: null}, {id: 312, level: "3", text: "BTCat", type: "Item", items: null}]}, {id: 32, level: "2", text: "Chair", type: "Item", items: [{id: 321, level: "3", text: "BCDog", type: "Item", items: null}, {id: 322, level: "3", text: "BCCat", type: "Item", items: null}]}]}]
console .log (flattenItems (data))
.as-console-wrapper {max-height: 100% !important; top: 0}
This version does not include the fairly useless items property. It would be easy enough to add it in, with something like this:
const flattenItems = (xs) =>
xs. flatMap (({items, ... node}) => [
{... node, items: items == null ? null : []},
... flattenItems (items || [])
])

This solution should work on IE11; uses filter, map, and reduce.
var item = function(x) {
return {
"id": x.id,
"level": x.level,
"text": x.text,
"type": x.type,
"items": x.items ? [] : null
}
}
var flatten = function(a, b) {
return a.concat(b);
};
var onlyUnique = function(acc, curr) {
if (acc.length == 0) {
acc.push(curr);
} else {
var search = acc.filter(function(x){return x.id===curr.id;})
if (search.length == 0) {
acc.push(curr);
}
}
return acc;
}
var newData = data.map(function(x) {
return x.items.map(function(xx) {
return xx.items.map(function(xxx) {
return [item(x), item(xx), item(xxx)];
}).reduce(flatten, []);
}).reduce(flatten, [])
}).reduce(flatten, []).reduce(onlyUnique, []);;
console.log(JSON.stringify(newData, null, 2))

Simple with map and reduce :
export function flatten<T>(value: T): T[] {
const out: T[] = [];
if (value.children) {
const children = Object.values(value.children);
out.push(
value,
...children.map(flatten).reduce((acc, curVal) => {
return acc.concat(curVal);
}),
);
} else {
out.push(value);
}
return out;
}

Here is another solution using object-scan. This library is designed around traversing object hierarchies, so gives a lot of flexibility if this isn't exactly the result one needs.
.as-console-wrapper {max-height: 100% !important; top: 0}
<script type="module">
import objectScan from 'https://cdn.jsdelivr.net/npm/object-scan#18.4.0/lib/index.min.js';
const data = [{ id: 1, level: '1', text: 'Sammy', type: 'Item', items: [{ id: 11, level: '2', text: 'Table', type: 'Item', items: [{ id: 111, level: '3', text: 'Dog', type: 'Item', items: null }, { id: 112, level: '3', text: 'Cat', type: 'Item', items: null }] }, { id: 12, level: '2', text: 'Chair', type: 'Item', items: [{ id: 121, level: '3', text: 'Dog', type: 'Item', items: null }, { id: 122, level: '3', text: 'Cat', type: 'Item', items: null }] }] }, { id: 2, level: '1', text: 'Sundy', type: 'Item', items: [{ id: 21, level: '2', text: 'MTable', type: 'Item', items: [{ id: 211, level: '3', text: 'MTDog', type: 'Item', items: null }, { id: 212, level: '3', text: 'MTCat', type: 'Item', items: null }] }, { id: 22, level: '2', text: 'MChair', type: 'Item', items: [{ id: 221, level: '3', text: 'MCDog', type: 'Item', items: null }, { id: 222, level: '3', text: 'MCCat', type: 'Item', items: null }] }] }, { id: 3, level: '1', text: 'Bruce', type: 'Folder', items: [{ id: 31, level: '2', text: 'BTable', type: 'Item', items: [{ id: 311, level: '3', text: 'BTDog', type: 'Item', items: null }, { id: 312, level: '3', text: 'BTCat', type: 'Item', items: null }] }, { id: 32, level: '2', text: 'Chair', type: 'Item', items: [{ id: 321, level: '3', text: 'BCDog', type: 'Item', items: null }, { id: 322, level: '3', text: 'BCCat', type: 'Item', items: null }] }] }];
const fn = objectScan(['[*].**{items[*]}'], {
rtn: ({ value }) => ({ ...value, items: value.items === null ? null : [] }),
afterFn: ({ result }) => result.reverse()
});
const r = fn(data);
console.log(r);
/* => [
{ id: 1, level: '1', text: 'Sammy', type: 'Item', items: [] },
{ id: 11, level: '2', text: 'Table', type: 'Item', items: [] },
{ id: 111, level: '3', text: 'Dog', type: 'Item', items: null },
{ id: 112, level: '3', text: 'Cat', type: 'Item', items: null },
{ id: 12, level: '2', text: 'Chair', type: 'Item', items: [] },
{ id: 121, level: '3', text: 'Dog', type: 'Item', items: null },
{ id: 122, level: '3', text: 'Cat', type: 'Item', items: null },
{ id: 2, level: '1', text: 'Sundy', type: 'Item', items: [] },
{ id: 21, level: '2', text: 'MTable', type: 'Item', items: [] },
{ id: 211, level: '3', text: 'MTDog', type: 'Item', items: null },
{ id: 212, level: '3', text: 'MTCat', type: 'Item', items: null },
{ id: 22, level: '2', text: 'MChair', type: 'Item', items: [] },
{ id: 221, level: '3', text: 'MCDog', type: 'Item', items: null },
{ id: 222, level: '3', text: 'MCCat', type: 'Item', items: null },
{ id: 3, level: '1', text: 'Bruce', type: 'Folder', items: [] },
{ id: 31, level: '2', text: 'BTable', type: 'Item', items: [] },
{ id: 311, level: '3', text: 'BTDog', type: 'Item', items: null },
{ id: 312, level: '3', text: 'BTCat', type: 'Item', items: null },
{ id: 32, level: '2', text: 'Chair', type: 'Item', items: [] },
{ id: 321, level: '3', text: 'BCDog', type: 'Item', items: null },
{ id: 322, level: '3', text: 'BCCat', type: 'Item', items: null }
] */
</script>
Disclaimer: I'm the author of object-scan

Convert tree structure to hierarchical array

I have puzzling with this problem for hours. I am using Angular and angular-ui-tree to create an editable tree with unknown number of leaves.
I need to flatten and convert the tree into a hierarchical array in order to pass it to MongoDb. I am also using Underscore.js as a utility
var tree = [{
"_id": 1,
"title": "node1",
"nodes": [{
"_id": 11,
"title": "node1.1",
"nodes": [{
"_id": 111,
"title": "node1.1.1",
"children": [{
"_id": 1111,
"title": "node1.1.1.1",
"children": []
}]
}]
}, {
"_id": 12,
"title": "node1.2",
"children": []
}]
}, {
"_id": 2,
"title": "node2",
"children": [{
"id": 21,
"title": "node2.1",
"children": []
}, {
"_id": 22,
"title": "node2.2",
"children": []
}]
}, {
"_id": 3,
"title": "node3",
"children": [{
"id": 31,
"title": "node3.1",
"children": []
}]
}, {
"_id": 4,
"title": "node4",
"children": [{
"_id": 41,
"title": "node4.1",
"children": []
}]
}]
//desired output
//parentId is null for top leaf nodes, path is String made by the parents' ids
[
{ "_id": 1, "title": "node1", "parentId": null, "path" : ""},
{ "_id": 11, "title": "node1.1", "parentId": 1, "path" : ",1"},
{ "_id": 111, "title": "node1.1.1", "parentId": 11, "path" : ",1,11"},
{ "_id": 1111, "title": "node1.1.1.1", "parentId": 111, "path" : ",1,11,111"},
{ "_id": 12, "title": "node1.1", "parentId": 1, "path" : ",1"},
{ "_id": 2, "title": "node2", "parentId": null, "path" : ""},
{ "_id": 21, "title": "node2.1", "parentId": 2, "path" : ",2"},
{ "_id": 3, "title": "node3", "parentId": null, "path" : ""},
{ "_id": 31, "title": "node3.1", "parentId": 3, "path" : ",3"},
{ "_id": 4, "title": "node4", "parentId": null, "path" : ""},
{ "_id": 41, "title": "node4.1", "parentId": 4, "path" : ",4"},
]

I'd use recursion here to "walk" down the tree. Note that your input tree sometimes uses "children" and sometimes uses "nodes" to denote its array of children; I have changed it to "children" throughout.
var wholeTree = [{
"_id": 1,
"title": "node1",
"children": [{
"_id": 11,
"title": "node1.1",
"children": [{
"_id": 111,
"title": "node1.1.1",
"children": [{
"_id": 1111,
"title": "node1.1.1.1",
"children": []
}]
}]
}, {
"_id": 12,
"title": "node1.2",
"children": []
}]
}, {
"_id": 2,
"title": "node2",
"children": [{
"id": 21,
"title": "node2.1",
"children": []
}, {
"_id": 22,
"title": "node2.2",
"children": []
}]
}, {
"_id": 3,
"title": "node3",
"children": [{
"id": 31,
"title": "node3.1",
"children": []
}]
}, {
"_id": 4,
"title": "node4",
"children": [{
"_id": 41,
"title": "node4.1",
"children": []
}]
}];
var flattened = flattenTreeToNodes( wholeTree, null, "" );
$("#output").text( JSON.stringify(flattened) );
function flattenTreeToNodes( tree, parentId, basePath ) {
console.log( parentId, basePath );
function createFlattenedNode( treeNode ) {
var path = parentId?basePath + "," + parentId:"";
return {
"_id": treeNode._id,
title: treeNode.title,
parentId: parentId,
path: path
}
}
var nodes = [];
for(var i=0; i<tree.length; i++) {
var treeNode = tree[i];
var flattenedNode = createFlattenedNode(treeNode);
nodes.push ( flattenedNode );
var flattenedChildren = flattenTreeToNodes( treeNode.children, treeNode._id, flattenedNode.path );
nodes = nodes.concat( flattenedChildren );
}
return nodes;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id='output'>
</pre>

A Simple recursive function will do the job :
var out = [
];
var generate = function (collection, parent) {
for (var i = 0; i < collection.length; i++) {
var obj = {
'_id': collection[i]['_id'],
'title': collection[i]['title'],
'parentId': parent ? parent['_id'] : null,
'path': parent ? ',' + parent['_id'] : ''
};
out.push(obj);
if (collection[i].nodes) {
generate(collection[i].nodes, collection[i]);
} else {
generate(collection[i].children, collection[i]);
}
}
};
See example below:
var tree = [
{
'_id': 1,
'title': 'node1',
'nodes': [
{
'_id': 11,
'title': 'node1.1',
'nodes': [
{
'_id': 111,
'title': 'node1.1.1',
'children': [
{
'_id': 1111,
'title': 'node1.1.1.1',
'children': [
]
}
]
}
]
},
{
'_id': 12,
'title': 'node1.2',
'children': [
]
}
]
},
{
'_id': 2,
'title': 'node2',
'children': [
{
'id': 21,
'title': 'node2.1',
'children': [
]
},
{
'_id': 22,
'title': 'node2.2',
'children': [
]
}
]
},
{
'_id': 3,
'title': 'node3',
'children': [
{
'id': 31,
'title': 'node3.1',
'children': [
]
}
]
},
{
'_id': 4,
'title': 'node4',
'children': [
{
'_id': 41,
'title': 'node4.1',
'children': [
]
}
]
}
];
var out = [
];
var generate = function (collection, parent) {
for (var i = 0; i < collection.length; i++) {
var obj = {
'_id': collection[i]['_id'],
'title': collection[i]['title'],
'parentId': parent ? parent['_id'] : null,
'path': parent ? ',' + parent['_id'] : ''
};
out.push(obj);
if (collection[i].nodes) {
generate(collection[i].nodes, collection[i]);
} else {
generate(collection[i].children, collection[i]);
}
}
};
generate(tree, null);
console.log(JSON.stringify(out,null,4));
//prints
[
{
"_id": 1,
"title": "node1",
"parentId": null,
"path": ""
},
{
"_id": 11,
"title": "node1.1",
"parentId": 1,
"path": ",1"
},
{
"_id": 111,
"title": "node1.1.1",
"parentId": 11,
"path": ",11"
},
{
"_id": 1111,
"title": "node1.1.1.1",
"parentId": 111,
"path": ",111"
},
{
"_id": 12,
"title": "node1.2",
"parentId": 1,
"path": ",1"
},
{
"_id": 2,
"title": "node2",
"parentId": null,
"path": ""
},
{
"title": "node2.1",
"parentId": 2,
"path": ",2"
},
{
"_id": 22,
"title": "node2.2",
"parentId": 2,
"path": ",2"
},
{
"_id": 3,
"title": "node3",
"parentId": null,
"path": ""
},
{
"title": "node3.1",
"parentId": 3,
"path": ",3"
},
{
"_id": 4,
"title": "node4",
"parentId": null,
"path": ""
},
{
"_id": 41,
"title": "node4.1",
"parentId": 4,
"path": ",4"
}
]