Discover potential routes to nodes using JavaScript

Question

Discover potential routes to nodes using JavaScript

I need assistance displaying all potential node paths in JavaScript:

var object = {"metadata":{"record_count":5,"page_number":1,"records_per_page":5},"records":[{"name":"Kitchen","id":666,"parent_id":0,"children":null},{"name":"Jewellery","id":667,"parent_id":0,"children":null},{"name":"BabyProducts","id":668,"parent_id":0,"children":null},{"name":"Books","id":669,"parent_id":0,"children":[{"name":"Story Books","id":689,"parent_id":669,"children":[{"name":"Children's Story Books","id":690,"parent_id":689,"children":null}]}]},{"name":"Apparel","id":670,"parent_id":0,"children":null}]};

function formCategoryTrees(object, parentNode) {
    
    var div = document.getElementById("output");
     _.each(object,function(objectValues){
         var leafCategoryId = objectValues["id"];
         var leafCategoryName =  objectValues["name"];
         
         if(parentNode === null){
             div.innerHTML = div.innerHTML + leafCategoryName + "</br>";
         } else {
             div.innerHTML = div.innerHTML + parentNode + "->" + leafCategoryName + " " + leafCategoryId + "</br>";
         }

         var hasChildren = objectValues.hasOwnProperty("children");
         var childValue = objectValues["children"];
         
         if(hasChildren && childValue !== null) {
             formCategoryTrees(objectValues["children"], leafCategoryName);
         }
        
      });
  }

formCategoryTrees(object.records, null);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="output"></div>

https://jsfiddle.net/tfa8n5tj/3/

The current outcome is:

Kitchen
Jewellery
BabyProducts
Books
Books->Story Books 689
Story Books->Children's Story Books 690
Apparel

However, the desired display is:

Kitchen
Jewellery
BabyProducts
Books
Books->Story Books 689
Books->Story Books->Children's Story Books 690
Apparel

Please assist me in achieving this result.

javascript underscore.js

Answer 1

Answer №1

This code snippet demonstrates the implementation of a depth-first tree traversal algorithm in JavaScript.

var object = {"metadata":{"record_count":5,"page_number":1,"records_per_page":5},"records":[{"name":"Kitchen","id":666,"parent_id":0,"children":null},{"name":"Jewellery","id":667,"parent_id":0,"children":null},{"name":"BabyProducts","id":668,"parent_id":0,"children":null},{"name":"Books","id":669,"parent_id":0,"children":[{"name":"Story Books","id":689,"parent_id":669,"children":[{"name":"Children's Story Books","id":690,"parent_id":689,"children":null}]}]},{"name":"Apparel","id":670,"parent_id":0,"children":null}]};

browse({ children: object.records }, '', function (node, path) {
  if (!path) return;
  if (node.parent_id) path += ' (' + node.id + ')';
  print(path);
});

function browse (tree, path, forEachNode) {
  var i, node;
  var nodes = tree.children;
  var l = nodes ? nodes.length : 0;
  forEachNode(tree, path);
  if (path !== '') path += ' -> ';
  for (i = 0; i < l; i++) {
    node = nodes[i];
    browse(node, path + node.name, forEachNode);
  }
}

function print (html) {
  document.body.innerHTML += html + '<br />';
}

Answer 2

This code snippet demonstrates the implementation of a depth-first tree traversal algorithm in JavaScript.

var object = {"metadata":{"record_count":5,"page_number":1,"records_per_page":5},"records":[{"name":"Kitchen","id":666,"parent_id":0,"children":null},{"name":"Jewellery","id":667,"parent_id":0,"children":null},{"name":"BabyProducts","id":668,"parent_id":0,"children":null},{"name":"Books","id":669,"parent_id":0,"children":[{"name":"Story Books","id":689,"parent_id":669,"children":[{"name":"Children's Story Books","id":690,"parent_id":689,"children":null}]}]},{"name":"Apparel","id":670,"parent_id":0,"children":null}]};

browse({ children: object.records }, '', function (node, path) {
  if (!path) return;
  if (node.parent_id) path += ' (' + node.id + ')';
  print(path);
});

function browse (tree, path, forEachNode) {
  var i, node;
  var nodes = tree.children;
  var l = nodes ? nodes.length : 0;
  forEachNode(tree, path);
  if (path !== '') path += ' -> ';
  for (i = 0; i < l; i++) {
    node = nodes[i];
    browse(node, path + node.name, forEachNode);
  }
}

function print (html) {
  document.body.innerHTML += html + '<br />';
}

Answer 3

Answer №2

What do you think of this?

var data = {"info":{"count":6,"page":1,"limit":5},"items":[{"name":"Electronics","id":123,"parent_id":0,"children":[{"name":"Phones","id":145,"parent_id":123,"children":null},{"name":"Laptops","id":146,"parent_id":123,"children":null}]},{"name":"Toys","id":124,"parent_id":0,"children":null},{"name":"Clothing","id":125,"parent_id":0,"children":null}]};
  
function displayCategories(items, prefix) {
    var el = document.getElementById("categories");
     _.each(items,function(item){
         
         el.innerHTML += prefix + item.name + (prefix ? ' ' + item.id: '') + '<br>';

         if(item.children) {
             displayCategories(item.children, prefix + item.name + ' -> ');
         }
        
      });
}

displayCategories(data.items, '')

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="categories"></div>

Answer 4

What do you think of this?

var data = {"info":{"count":6,"page":1,"limit":5},"items":[{"name":"Electronics","id":123,"parent_id":0,"children":[{"name":"Phones","id":145,"parent_id":123,"children":null},{"name":"Laptops","id":146,"parent_id":123,"children":null}]},{"name":"Toys","id":124,"parent_id":0,"children":null},{"name":"Clothing","id":125,"parent_id":0,"children":null}]};
  
function displayCategories(items, prefix) {
    var el = document.getElementById("categories");
     _.each(items,function(item){
         
         el.innerHTML += prefix + item.name + (prefix ? ' ' + item.id: '') + '<br>';

         if(item.children) {
             displayCategories(item.children, prefix + item.name + ' -> ');
         }
        
      });
}

displayCategories(data.items, '')

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="categories"></div>

Discover potential routes to nodes using JavaScript

Answer №1

Answer №2

Similar questions

Generate TypeScript type definitions for environment variables in my configuration file using code

Creating an event declaration using Javascript's onclick function

After attempting to follow a guide, I encountered a scenario where a view was returning None because the is_ajax function was not

Store the result of the previous AJAX call in a jQuery variable and combine it with the data from the next AJAX response

Is it possible to incorporate knockout.js within a Node.js environment by utilizing .fn extensions in custom modules?

JQuery displays 'undefined' on checkbox loaded via Ajax

How can a JavaScript function communicate with a code behind method?

Encountering an issue when passing a response using coverage.js

Next.JS is having trouble importing the URL class from the 'url' module in Node

Exploring the Adjustment of State as well as Function in Next/React JS

Encountering timeout issues with Next.JS fetch and Axios requests on Vercel production environment

Ensure that JavaScript functions are executed sequentially without overlapping

Following the ajax request, the subsequent code was unable to be executed as it awaited the JSON response

Error: The variable "message" has not been defined. Please define it before displaying the welcome

Encountering an error: Reading an undefined property - NodeJS, Express, and Mongoose

React issue: parent state becoming unresponsive when updating during input onChange event

Assign an AJAX call to retrieve data from a MySQL table and store it in a

Tips for utilizing Vue router query parameters while in hash mode:

Error: Unable to modify a property that is marked as read-only on object '#<Object>' in Redux Toolkit slice for Firebase Storage in React Native

The Data Table experiences intermittent hanging issues (Table is empty) when sorting or loading data with Knockout binding