Flatten a deeply nested object using JavaScript

Flatten a deeply nested object using JavaScript - javascript

I have an object with a triple nested objects. I want to flatten the object to clearly review the values and place in an HTML.
{
"templateName": "Test template",
"assignmentGroup": "Test template",
"fields": [{
"type": "Multi Select dropdown",
"entry": [{
"checked": false,
"value": "govtBusinses",
"displayValue": "Government Business Division"
}, {
"checked": true,
"value": "privateSector",
"displayValue": "Private Sector"
}, {
"checked": true,
"value": "publicSector",
"displayValue": "Public Sector"
}]
}, {
"type": "Text Field",
"entry": null
}]
}
I tried flatting it, but I want it to be in desired format.
flattenObject = function(ob) {
let toReturn = {};
for (let i in ob) {
if (!ob.hasOwnProperty(i)) {
continue;
}
if ((typeof ob[i]) === "object") {
let flatObject = this.flattenObject(ob[i]);
for (let x in flatObject) {
if (!flatObject.hasOwnProperty(x)) {
continue;
}
toReturn[i + "." + x] = flatObject[x];
}
} else {
toReturn[i] = ob[i];
}
}
console.log(toReturn);
return toReturn;
};
Expected:
TemplateName : "Test template"
Assignment Group : "sample"
Field 0 :
Type : Multiselect dropdown
Entry 0 :
checked : false
value :
buisness:
Entry 1:
checked : false
value :
buisness:
Field 1:
Type:
.......
How can i achieve this?

You can't have different values with same Key in object. I guess better way to achieve this would be to return array of objects instead.
try this:
let obj = {
"templateName": "Test template",
"assignmentGroup": "Test template",
"fields": [{
"type": "Multi Select dropdown",
"entry": [{
"checked": false,
"value": "govtBusinses",
"displayValue": "Government Business Division"
}, {
"checked": true,
"value": "privateSector",
"displayValue": "Private Sector"
}, {
"checked": true,
"value": "publicSector",
"displayValue": "Public Sector"
}]
}, {
"type": "Text Field",
"entry": null
}]
}
let fieldsCount = []
flattenObject = function(ob, toReturnArr) {
for (let i in ob) {
if (!ob.hasOwnProperty(i)) {
continue;
}
if ((typeof ob[i]) === "object") {
if (isNaN(i)) {
fieldsCount[i] = fieldsCount[i] === undefined ? 0 : fieldsCount[i] + 1
ob[i] && ob[i].length ? console.log(`${i}: ${fieldsCount[i]}`) : null;
}
toReturnArr = this.flattenObject(ob[i], toReturnArr);
} else {
console.log(`${i}: ${ob[i]}`);
toReturnArr.push({
[i]: ob[i]
})
}
}
return toReturnArr;
};
flattenObject(obj, [])
Result:
templateName: Test template
assignmentGroup: Test template
fields: 0
type: Multi Select dropdown
entry: 0
checked: false
value: govtBusinses
displayValue: Government Business Division
checked: true
value: privateSector
displayValue: Private Sector
checked: true
value: publicSector
displayValue: Public Sector
type: Text Field
PS: {[key]: object[key]} using variable for key value like [key] is the ES6 feature.

Related

Loop through an array of objects and update parent object count if child object exists

I am using Angular 13 and I have an array of objects like this:
[{
"name": "Operating System",
"checkedCount": 0,
"children": [{
"name": "Linux",
"value": "Redhat",
"checked": true
},
{
"name": "Windows",
"value": "Windows 10"
}
]
},
{
"name": "Software",
"checkedCount": 0,
"children": [{
"name": "Photoshop",
"value": "PS",
"checked": true
},
{
"name": "Dreamweaver",
"value": "DW"
},
{
"name": "Fireworks",
"value": "FW",
"checked": true
}
]
}
]
I would like to loop through the array, check if each object has a children array and it in turn has a checked property which is set to true, then I should update the checkedCount in the parent object. So, result should be like this:
[{
"name": "Operating System",
"checkedCount": 1,
"children": [{
"name": "Linux",
"value": "Redhat",
"checked": true
},
{
"name": "Windows",
"value": "Windows 10"
}
]
},
{
"name": "Software",
"checkedCount": 2,
"children": [{
"name": "Photoshop",
"value": "PS",
"checked": true
},
{
"name": "Dreamweaver",
"value": "DW"
},
{
"name": "Fireworks",
"value": "FW",
"checked": true
}
]
}
]
I tried to do it this way in angular, but this is in-efficient and results in an error saying this.allFilters[i].children[j] may be undefined. So, looking for an efficient manner to do this.
for(let j=0;i<this.allFilters[i].children.length; j++) {
if (Object.keys(this.allFilters[i].children[j]).length > 0) {
if (Object.prototype.hasOwnProperty.call(this.allFilters[i].children[j], 'checked')) {
if(this.allFilters[i].children[j].checked) {
this.allFilters[i].checkedCount++;
}
}
}
}

Use a nested for loop to check all the children. If checked is truthy, increment the count of the parent. You don't need to check if parent.children has any elements since if there are no elements the loop won't run anyways.
// minified data
const data = [{"name":"Operating System","checkedCount":0,"children":[{"name":"Linux","value":"Redhat","checked":!0},{"name":"Windows","value":"Windows 10"}]},{"name":"Software","checkedCount":0,"children":[{"name":"Photoshop","value":"PS","checked":!0},{"name":"Dreamweaver","value":"DW"},{"name":"Fireworks","value":"FW","checked":!0}]}];
for (const parent of data) {
for (const child of parent.children) {
if (child.checked) parent.checkedCount++;
}
}
console.log(data);

No need to complicate it like that, you just need to check checked property in children.
data.forEach((v) => {
v.children.forEach((child) => {
if (child.checked) {
v.checkedCount++;
}
});
});

Using filter + length on children array should do the job:
const data = [{"name":"Operating System","checkedCount":null,"children":[{"name":"Linux","value":"Redhat","checked":true},{"name":"Windows","value":"Windows 10"}]},{"name":"Software","checkedCount":null,"children":[{"name":"Photoshop","value":"PS","checked":true},{"name":"Dreamweaver","value":"DW"},{"name":"Fireworks","value":"FW","checked":true}]}];
data.forEach(itm => {
itm.checkedCount = itm.children?.filter(e => e.checked === true).length ?? 0;
});
console.log(input);

I would suggest going functional.
Using map
const children = arr.map(obj => obj.children);
const result = children.map((child, idx) => {
const checkedCount = child.filter(obj => obj.checked)?.length;
return {
...arr[idx],
checkedCount
};
});
console.log(result)
or using forEach
const result = [];
const children = arr.map(obj => obj.children);
children.forEach((child, idx) => {
const checkedCount = child.filter(obj => obj.checked)?.length;
result[idx] = {
...arr[idx],
checkedCount
};
});
console.log(result)

How can I update this nested object's value if one of its properties match in JS?

I saw many answers, but I haven't been able to modify any to my need.
Object
{
"id": "476ky1",
"custom_id": null,
"name": "Reunião com o novo Gerente de Vendas - Airton",
"text_content": null,
"description": null,
"status": {
"id": "p3203621_11svBhbO"
},
"archived": false,
"creator": {
"id": 3184709
},
"time_spent": 0,
"custom_fields": [{
"id": "36c0de9a-9243-4259-ba57-bd590ba07fe0",
"name": "Comments",
"value": "dsdsdsds"
}],
"attachments": []
}
Within custom_fields, if the property name's value is Comments, update the value property.
I've tried it like this, using this approach, for example, but it doesn't produce the expected result.
const updatedComment = [{ name: "Comments", value: "The comment is updated"}];
updateNestedObj(taskData, updatedComment)
function updateNestedObj(obj, updates) {
const updateToApply = updates.find(upd => upd.id === obj.id);
if (updateToApply) {
obj.title = updateToApply.content;
obj.note = updateToApply.note;
}
// Apply updates to any child objects
for(let k in obj) {
if (typeof(obj[k]) === 'object') {
updateNestedObj(obj[k], updates);
}
}
}

You're using the wrong property names when you search updates for updateToApply, and then when assigning the value.
When you recurse on children, you need to distinguish between arrays and ordinary objects, so you can loop over the nested arrays. You also have to skip null properties, because typeof null == 'object'.
const updatedComment = [{
name: "Comments",
value: "The comment is updated"
}];
function updateNestedObj(obj, updates) {
let updateToApply = updates.find(upd => upd.name == obj.name);
if (updateToApply) {
obj.value = updateToApply.value;
}
// Apply updates to any child objects
Object.values(obj).forEach(child => {
if (Array.isArray(child)) {
child.forEach(el => updateNestedObj(el, updates));
} else if (typeof(child) === 'object' && child != null) {
updateNestedObj(child, updates);
}
});
}
const taskData = {
"id": "476ky1",
"custom_id": null,
"name": "Reunião com o novo Gerente de Vendas - Airton",
"text_content": null,
"description": null,
"status": {
"id": "p3203621_11svBhbO"
},
"archived": false,
"creator": {
"id": 3184709
},
"time_spent": 0,
"custom_fields": [{
"id": "36c0de9a-9243-4259-ba57-bd590ba07fe0",
"name": "Comments",
"value": "dsdsdsds"
}],
"attachments": []
};
updateNestedObj(taskData, updatedComment)
console.log(taskData);

Try this:
const updatedComment = [{ name: "Comments", value: "A new comment value" }]
// you can add as many updates as you want
function update(obj, updates) {
for (const update in updates) {
for (const field in obj.custom_fields) {
if (obj.obj.custom_fields.name == update.name) {
obj.obj.custom_fields.value = update.value
}
}
}
}
update(obj, updatedComment)

Javascript recursive function is returning multiple result arrays instead of a final array having all the objects after looping over a JSON file

I have the following script that will loop over a huge JSON array to gather some information:
function recursiveTree(data, p_dim_name, p_dim_label, p_field_name, p_field_label) {
var outputArray = [];
for (parent_key in data) {
if(data[parent_key]["name"]!="meta" && data[parent_key]["type"]!="start" && data[parent_key]["type"]!="end" && data[parent_key]["type"]!="deviceid" && data[parent_key]["type"]!="today"){
var dim_name = "";
var dim_label = "";
var field_name = "";
var field_label = "";
var field_type = "";
dim_name = p_dim_name == "" ? data[parent_key]["name"] : p_dim_name;
field_name = p_field_name == "" ? data[parent_key]["name"] : p_field_name+"/"+data[parent_key]["name"];
field_type = data[parent_key]["type"] == undefined ? "select multiple" : data[parent_key]["type"];
if (data[parent_key]["label"] && typeof data[parent_key]["label"] === "object") {
dim_label = p_dim_label == "" ? data[parent_key]["label"]["english"] : p_dim_label+"/"+data[parent_key]["label"]["english"];
field_label = data[parent_key]["label"]["english"];
} else if (data[parent_key]["label"] && typeof data[parent_key]["label"] != "object") {
dim_label = p_dim_label == "" ? data[parent_key]["label"] : data[parent_key]["label"]+"/"+p_dim_label;
field_label = data[parent_key]["label"] ;
}
else {
dim_label = dim_name;
}
// field_label = p_field_label == "" ? data[parent_key]["label"] : data[parent_key]["label"]+"/"+p_dim_label+"/"+dim_label;
//console.log(("children" in data[parent_key]))
if (data[parent_key].children && data[parent_key].type != "select one") {
recursiveTree(data[parent_key]["children"], dim_name, dim_label, field_name, field_label);
}
else {
var obj = {};
obj =
{
"dim_label": dim_label,
"dim_name": field_name.slice(0, field_name.lastIndexOf("/")),
"field_name": field_name,
"field_label": field_label,
"field_type": field_type
};
}
outputArray.push(obj)
}
}
console.log(outputArray)
}
And here is a small snippet of the JSON array I have:
var data = {
"name": "Info",
"title": "Info",
"default_language": "default",
"id_string": "...",
"type": "survey",
"children": [
{
"type": "text",
"name": "basic_info",
"label": "Basic Info",
"children": [
{
"type": "text",
"name": "name",
"label": {
"english": "What is your name"
}
},
{
"type": "text",
"name": "address",
"label": {
"english": "What is your address?"
}
}
]
},
{
"type": "text",
"name": "more_data",
"label": "More Data",
"children": [
{
"type": "text",
"name": "favourite_food",
"label": {
"english": "What is your favourite food?"
}
},
{
"type": "text",
"name": "favourite_destination",
"label": {
"english": "What is your favourite destination?"
},
"children": [
{
"type": "text",
"name": "france",
"label": {
"english": "France"
}
},
{
"type": "text",
"name": "usa",
"label": {
"english": "USA"
}
}
]
}
]
},
{
"type": "number",
"name": "estimated_income",
"label": "What is your annual estimated income?"
}
]
}
The problem is when I push into the output array, I cannot get the end result in one single array, but in multiple ones. Check this jsfiddle.
I need the final objects to be in one single array. The script is doing great using recursive approach, but the push into the array is returning multiple arrays.
Here is an image when I run the script over my original array:

it return single result but you call console.log(outputArray) multiple times, change it to return outputArray
this call has no variable assigned, did you mean var obj = recursiveTree(...)
if (data[parent_key].children && data[parent_key].type != "select one") {
recursiveTree(data[parent_key]["children"], dim_name, dim_label, field_name, field_label);
}

Here is the answer. I moved the outputArray declaration into outside of the function and returned back at the end of the method:
var data = {name: "Info", title: "Info", default_language: "default", id_string: "...", type: "survey", children: [{type: "text", name: "basic_info", label: "Basic Info", children: [{type: "text", name: "name", label: {english: "What is your name"}}, {type: "text", name: "address", label: {english: "What is your address?"}}]}, {type: "text", name: "more_data", label: "More Data", children: [{type: "text", name: "favourite_food", label: {english: "What is your favourite food?"}}, {type: "text", name: "favourite_destination", label: {english: "What is your favourite destination?"}, children: [{type: "text", name: "france", label: {english: "France"}}, {type: "text", name: "usa", label: {english: "USA"}}]}]}, {type: "number", name: "estimated_income", label: "What is your annual estimated income?"}]}
var outputArray = [];
function recursiveTree(data, p_dim_name, p_dim_label, p_field_name, p_field_label) {
for (parent_key in data) {
if(data[parent_key]["name"]!="meta" && data[parent_key]["type"]!="start" && data[parent_key]["type"]!="end" && data[parent_key]["type"]!="deviceid" && data[parent_key]["type"]!="today"){
var dim_name = "";
var dim_label = "";
var field_name = "";
var field_label = "";
var field_type = "";
dim_name = p_dim_name == "" ? data[parent_key]["name"] : p_dim_name;
field_name = p_field_name == "" ? data[parent_key]["name"] : p_field_name+"/"+data[parent_key]["name"];
field_type = data[parent_key]["type"] == undefined ? "select multiple" : data[parent_key]["type"];
if (data[parent_key]["label"] && typeof data[parent_key]["label"] === "object") {
dim_label = p_dim_label == "" ? data[parent_key]["label"]["english"] : p_dim_label+"/"+data[parent_key]["label"]["english"];
field_label = data[parent_key]["label"]["english"];
} else if (data[parent_key]["label"] && typeof data[parent_key]["label"] != "object") {
dim_label = p_dim_label == "" ? data[parent_key]["label"] : data[parent_key]["label"]+"/"+p_dim_label;
field_label = data[parent_key]["label"] ;
}
else {
dim_label = dim_name;
}
var obj = {};
obj =
{
"dim_label": dim_label,
"dim_name": field_name.slice(0, field_name.lastIndexOf("/")),
"field_name": field_name,
"field_label": field_label,
"field_type": field_type
};
// field_label = p_field_label == "" ? data[parent_key]["label"] : data[parent_key]["label"]+"/"+p_dim_label+"/"+dim_label;
//console.log(("children" in data[parent_key]))
if (data[parent_key].children && data[parent_key].type != "select one") {
recursiveTree(data[parent_key]["children"], dim_name, dim_label, field_name, field_label);
}
outputArray.push(obj)
}
}
return outputArray;
}
var result = recursiveTree(data["children"], "", "", "", "");
console.log(result)
.as-console-wrapper {max-height: 100% !important; top: 0}

Convert String into JSON through JQuery

String is :
AVG(Disk Usage,CPU USAGE,NETWORK USAGE,SUM(Shared Memory Usage,System Memory Usage))
Output Required :
{
"operation": "AVG",
"rules": [
{
"field": "Disk Usage"
},
{
"field": "CPU Usage"
},
{
"field": "Network Usage"
},
{
"operation": "SUM",
"rules": [
{
"field": "Shared Memory Usage"
},
{
"field": "System Memory Usage"
}
]
}
]
}

I've wrote the solution for your case using some regexp pattern, RegExp.exec, String.split and Array.map functions. I also added one more nested operator to process complex example.Hope it will help ...
var str = "AVG(Disk Usage,CPU USAGE,NETWORK USAGE,SUM(Shared Memory Usage,System Memory Usage),COUNT(Processes,Services))",
re = /(\w+?)\(([^()]+)(?=,\w+?\()|(?:,\))?(\w+?)\(([^)]+)/g, m, idx,
obj = {}, result = {};
while ((m = re.exec(str)) !== null) {
idx = m.index; // position of the current matched item in the initial input string
m = m.filter((v) => v); // to get consecutive filled matched items
obj = {'operation': m[1], 'rules' : m[2].split(",").map((v) => ({'field':v}))};
if (idx === 0) { // the first function(operator) i.e. "AVG"
result = obj;
} else {
result['rules'].push(obj);
}
}
console.log(JSON.stringify(result, 0, 4));
The output:
{
"operation": "AVG",
"rules": [
{
"field": "Disk Usage"
},
{
"field": "CPU USAGE"
},
{
"field": "NETWORK USAGE"
},
{
"operation": "SUM",
"rules": [
{
"field": "Shared Memory Usage"
},
{
"field": "System Memory Usage"
}
]
},
{
"operation": "COUNT",
"rules": [
{
"field": "Processes"
},
{
"field": "Services"
}
]
}
]
}

Try it:
JSON.parse(jsonObj); //javascript
You should do something like this:
var jsonObj = '{"TeamList" : [{"teamid" : "1","teamname" : "Barcelona"}]}';
var obj = $.parseJSON(jsonObj);
Hope it helps;)

Creating a tree from a flat list using lodash

I am trying to create a category tree using the array of json objects below.
I want to set a category as a child of another category if its parent equals the id of the other, and I want the posts also to be a children of that category instead of having a separate field for posts, I'll add a flag field that if it is a category or not isParent.
It looks like its working alright, but as you may see, if a category has both category and post as child, it'll only show the categories. Another problem with that is if the post has a null value on its array, it will still push them as children.
What are the mistakes in my code, or is there a simpler or better solution to this?
var tree = unflatten(getData());
var pre = document.createElement('pre');
console.log(tree);
pre.innerText = JSON.stringify(tree, null, 4);
document.body.appendChild(pre);
function unflatten(array, parent, tree) {
tree = typeof tree !== 'undefined' ? tree : [];
parent = typeof parent !== 'undefined' ? parent : {
id: 0
};
_.map(array, function(arr) {
_.set(arr, 'isParent', true);
});
var children = _.filter(array, function(child) {
return child.parent == parent.id;
});
if (!_.isEmpty(children)) {
if (parent.id == 0) {
tree = children;
} else {
parent['children'] = children;
}
_.each(children, function(child) {
var posts = _.map(child.posts, function(post) {
return _.set(post, 'isParent', false);
});
child['children'] = posts;
delete child.posts;
unflatten(array, child);
});
}
return tree;
}
function getData() {
return [{
"id": "c1",
"parent": "",
"name": "foo",
"posts": [{
"id": "p1"
}]
}, {
"id": "c2",
"parent": "1",
"name": "bar",
"posts": [{
"id": "p2"
}]
}, {
"id": "c3",
"parent": "",
"name": "bazz",
"posts": [
null
]
}, {
"id": "c4",
"parent": "3",
"name": "sna",
"posts": [{
"id": "p3"
}]
}, {
"id": "c5",
"parent": "3",
"name": "ney",
"posts": [{
"id": "p4"
}]
}, {
"id": "c6",
"parent": "5",
"name": "tol",
"posts": [{
"id": "p5"
}, {
"id": "p6"
}]
}, {
"id": "c7",
"parent": "5",
"name": "zap",
"posts": [{
"id": "p7"
}, {
"id": "p8"
}, {
"id": "p9"
}]
}, {
"id": "c8",
"parent": "",
"name": "quz",
"posts": [
null
]
}, {
"id": "c9",
"parent": "8",
"name": "meh",
"posts": [{
"id": "p10"
}, {
"id": "p11"
}]
}, {
"id": "c10",
"parent": "8",
"name": "ror",
"posts": [{
"id": "p12"
}, {
"id": "p13"
}]
}, {
"id": "c11",
"parent": "",
"name": "gig",
"posts": [{
"id": "p14"
}]
}, {
"id": "c12",
"name": "xylo",
"parent": "",
"posts": [{
"id": "p15"
}]
}, {
"id": "c13",
"parent": "",
"name": "grr",
"posts": [{
"id": "p16"
}, {
"id": "p17"
}, {
"id": "p14"
}, {
"id": "p18"
}, {
"id": "p19"
}, {
"id": "p20"
}]
}]
}
<script src="//cdn.jsdelivr.net/lodash/3.10.1/lodash.min.js"></script>
Expected Output
So the expected output will be more like:
[
{
id: 'c1',
isParent: true,
children: [
{
id: 'c2',
isParent: true,
children: []
},
{
id: 'p1'
isParent: false
}
]
}
]
And so on..

Your code is very imperative. Try focusing on the "big picture" of data flow instead of writing code by trial-and-error. It's harder, but you get better results (and, in fact, usually it's faster) :)
My idea is to first group the categories by their parents. This is the first line of my solution and it actually becomes much easier after that.
_.groupBy and _.keyBy help a lot here:
function makeCatTree(data) {
var groupedByParents = _.groupBy(data, 'parent');
var catsById = _.keyBy(data, 'id');
_.each(_.omit(groupedByParents, ''), function(children, parentId) {
catsById['c' + parentId].children = children;
});
_.each(catsById, function(cat) {
// isParent will be true when there are subcategories (this is not really a good name, btw.)
cat.isParent = !_.isEmpty(cat.children);
// _.compact below is just for removing null posts
cat.children = _.compact(_.union(cat.children, cat.posts));
// optionally, you can also delete cat.posts here.
});
return groupedByParents[''];
}
I recommend trying each part in the developer console, then it becomes easy to understand.

I have made a small fidde that I think that is what you want.
http://jsfiddle.net/tx3uwhke/
var tree = buildTree(getData());
var pre = document.getElementById('a');
var jsonString = JSON.stringify(tree, null, 4);
console.log(jsonString);
pre.innerHTML = jsonString;
document.body.appendChild(pre);
function buildTree(data, parent){
var result = [];
parent = typeof parent !== 'undefined' ? parent : {id:""};
children = _.filter(data, function(value){
return value.parent === parent.id;
});
if(!_.isEmpty(children)){
_.each(children, function(child){
if (child != null){
result.push(child);
if(!_.isEmpty(child.posts)){
var posts = _.filter(child.posts, function(post){
return post !== null && typeof post !== 'undefined';
});
if(!_.isEmpty(posts)){
_.forEach(posts, function(post){
post.isParent = false;
});
}
result = _.union(result, posts);
delete child.posts;
}
ownChildren = buildTree(data, child);
if(!_.isEmpty(ownChildren)){
child.isParent = true;
child.children = ownChildren;
}else{
child.isParent = false;
}
}
});
}
return result;
}
EDIT: made a new fiddle to contain the isParent part you can find it here

While this problem looks simple, I can remember to have struggled achieving it in a simple way. I therefore created a generic util to do so
You only have to write maximum 3 custom callbacks methods.
Here is an example:
import { flattenTreeItemDeep, treeItemFromList } from './tree.util';
import { sortBy } from 'lodash';
const listItems: Array<ListItem> = [
// ordered list arrival
{ id: 1, isFolder: true, parent: null },
{ id: 2, isFolder: true, parent: 1 },
{ id: 3, isFolder: false, parent: 2 },
// unordered arrival
{ id: 4, isFolder: false, parent: 5 },
{ id: 5, isFolder: true, parent: 1 },
// empty main level folder
{ id: 6, isFolder: true, parent: null },
// orphan main level file
{ id: 7, isFolder: false, parent: null },
];
const trees = treeItemFromList(
listItems,
(listItem) => listItem.isFolder, // return true if the listItem contains items
(parent, leafChildren) => parent.id === leafChildren.parent, // return true if the leaf children is contained in the parent
(parent, folderChildren) => parent.id === folderChildren.parent // return true if the children is contained in the parent
);
console.log(trees);
/*
[
{
children: [
{
children: [{ data: { id: 3, isFolder: false, parent: 2 }, isLeaf: true }],
data: { id: 2, isFolder: true, parent: 1 },
isLeaf: false,
},
{
children: [{ data: { id: 4, isFolder: false, parent: 5 }, isLeaf: true }],
data: { id: 5, isFolder: true, parent: 1 },
isLeaf: false,
},
],
data: { id: 1, isFolder: true, parent: null },
isLeaf: false,
},
{ children: [], data: { id: 6, isFolder: true, parent: null }, isLeaf: false },
{
data: {
id: 7,
isFolder: false,
parent: null,
},
isLeaf: true,
},
]
*/
I did not check with your example as all cases are different, you however need to implement only 3 methods to let the algorithm build the tree for you:
If the item is a folder or a leaf (in your case just check if the children contain any non falsy item) i.e. listItem.posts.some((value)=>!!value)
if a parent contains the leaf child, (parent, child) => !!parent.posts.filter((val)=>!!val).find(({id})=>child.id === id)
if a parent contains the folder: optional if this is the same logic as for a leaf child.

Develop Reference

JavaScript is the programming language of the Web.

Flatten a deeply nested object using JavaScript - javascript

Related

Loop through an array of objects and update parent object count if child object exists

How can I update this nested object's value if one of its properties match in JS?

Javascript recursive function is returning multiple result arrays instead of a final array having all the objects after looping over a JSON file

Convert String into JSON through JQuery

Creating a tree from a flat list using lodash

Categories

Resources