CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

06 August, 2024

Traverse over tree type structured data using JavaScript

 Programing Coderfunda     August 06, 2024     No comments   

I have a data set having parent and nested children in it. The purpose of this data is to traverse over parent.
1
/ \
2 3
/ \ / \
4 5 6 7



First traverse 1,2,4 Now 4 has no children During back traverse in else part output 4, 2 then it should go to 2, 5


Now, 5 is end. Trace isVisited in parent nodes if any of the child is property isVisited as false.
5,2,1,3



Expected Output:-
1, 2, 4, 2, 5, 2, 1, 3, 6, 3, 7



Once the node end is reached start traversing reverse direction from end of node to start e.g. child2 where other children were left off and were not visited yet.


Data Set in parent child relationship
[
{
"id": 0,
"children": [
{
"id": 3,
"parentId": 0,
"children": [
{
"id": 6,
"parentId": 3,
"children": [
{
"id": 11,
"parentId": 6,
"children": [
{
"id": 10,
"parentId": 11,
"children": [
{
"id": 8,
"parentId": 10,
}
]
}
]
},
{
"id": 9,
"parentId": 6,
"children": [
{
"id": 1,
"parentId": 9,
"children": [
{
"id": 7,
"parentId": 1,
}
]
}
]
},
{
"id": 4,
"parentId": 6,
}
]
}
]
}
]
}
]

let result = [];
const handleTree = ( tree, count) => {
count = count || 0
const tree = _.clone(data);
if( tree ){
tree.forEach( ( t: any, i: string | number ) => {
let deepCopy = _.clone({...t });
delete deepCopy.children;
const { id, parentId } = deepCopy
result.push({ id, isVisited: true, parentId });
if( tree[i].children ){
handleTree(tree[i].children, count+1 )
}else{
//Completed start reading backward
// const getPreviousParent = findParentDetails(tree[i].parentId )

}
})
}
}



How to approach this problem?
So far I have been able to read the data in the same direction but, getting some unexpected results while going backward.


I tried using this code but backtrace I am not getting accurate results.
const handleTree = (tree, path = [], visited = new Set() ) => {
let result = [];
let count = 0;
let visitTree = tree
if( tree && tree.length > 0 ){
const tree2 = (tree) => {
if (tree) {

tree.forEach((t, i) => {
count += 1;
let { children, id, parentId, index, ...rest } = t
result.push({ ...t, id, parentId, isVisited: true, sid: count });
tree = updateIsVisited( tree, id, parentId )
path?.push( t.id );
if (t.children) {
tree2(t.children.sort( ( a: any, b: any ) => b.order - a.order ) );
} else {

tree = updateIsVisited( tree, id, parentId )
path.pop();
const res = returnReverseNodesForTraversel( [...path], tree, t.id );
// Here data is not coming correctly
}
});
}
}
return tree2(tree)
}
};



Function For updating status
const updateIsVisited = ( nodesData, id ) => {

return nodesData.map ( ( node: any ) => {
const updatedNode = {
...node,
isVisited: node.id === id ? true : node.isVisited,
children: Array.isArray( node.children )
? updateIsVisitedInNestedObjects( node.children, id )
: []
}
return updatedNode;
})
}



I hope I have explained the question well and it is making sense. Suggestions are welcomed.
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook

Related Posts:

  • The SQL GROUP BY StatementThe SQL GROUP BY StatementThe GROUP BY statement groups rows that have the same values into summary rows, like "find the number of customers in each c… Read More
  • The SQL EXISTS OperatorThe SQL EXISTS OperatorThe EXISTS operator is used to test for the existence of any record in a subquery.The EXISTS operator returns true if the subqu… Read More
  • SQL Self JOINSQL Self JOINA self JOIN is a regular join, but the table is joined with itself.Self JOIN SyntaxSELECT column_name(s)FROM table1 T1, table1 … Read More
  • SQL UNION OperatorThe SQL UNION OperatorThe UNION operator is used to combine the result-set of two or more SELECT statements.Each SELECT statement within UNION must ha… Read More
  • The SQL HAVING ClauseThe SQL HAVING ClauseThe HAVING clause was added to SQL because the WHERE keyword could not be used with aggregate functions.HAVING SyntaxSELECT … Read More
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Sitaare Zameen Par Full Movie Review
     Here’s a  complete Vue.js tutorial for beginners to master level , structured in a progressive and simple way. It covers all essential topi...
  • Credit card validation in laravel
      Validation rules for credit card using laravel-validation-rules/credit-card package in laravel Install package laravel-validation-rules/cr...
  • C++ in Hindi Introduction
    C ++ का परिचय C ++ एक ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग लैंग्वेज है। C ++ को Bjarne Stroustrup द्वारा विकसित किया गया था। C ++ में आने से पह...
  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • iOS 17 Force Screen Rotation not working on iPAD only
    I have followed all the links on Google and StackOverFlow, unfortunately, I could not find any reliable solution Specifically for iPad devic...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (69)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (4)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

  • Sitaare Zameen Par Full Movie Review - 7/7/2025
  • Step-by-step Vue.js Tutorial Beginner to Master - 7/7/2025
  • Tailwindcss best practices for responsive design - 7/1/2025
  • Tailwind CSS Tutorial (Beginner to Master) - 7/1/2025
  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh - 9/21/2024

Laravel News

  • Early View Data Preparation with Laravel View Creators - 7/14/2025
  • AI-Driven Development Insiders Launch: 500 Seats. 24 Hours. 50% Off - 7/14/2025
  • Convert Eloquent Models to HLS Video - 7/15/2025
  • Laravel's toUri() Method for Dynamic URL Construction - 7/14/2025
  • Set up an AI-powered Laravel Development Environment with Claude Code and MCP Servers - 7/14/2025

Copyright © 2025 CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda