Access any nested node within a JSON/JS object by specifying the key's value

Question

Access any nested node within a JSON/JS object by specifying the key's value

After spending hours searching on various forums for a solution to my problem, I have yet to find one that directly addresses the issue I am facing. So, please take a moment to review the details below.

The object structure in question is as follows:

let data = [{
   "id": 777,
   "name": "Level 1_section_1",
   "children": [{
       "id": 778,
       "name": "Level 2a",
       "children": [

       ]
     },
     {
       "id": 783,
       "name": "Level 2b",
       "children": [

       ]
     }
   ]
 },
 {
   "id": 786,
   "name": "Level 1_section_2",
   "children": [{
     "id": 781,
     "name": "Level 2c",
     "children": [

     ]
   }]
 }
]

In essence, each node's children property contains an array of nodes with the same structure.

If I want to locate the node with id:783, my first instinct would be to implement recursion. However, I am unsure how to ensure that this recursive function traverses the entire tree until it locates and returns the specific node I require so that I can add more children to it.

Although I come from a computer science background, my understanding of recursion is somewhat lacking.

This is the attempted solution I have implemented in my jsfiddle: https://jsfiddle.net/hanktrizz/surmf7dq/4/

Please bear in mind that the depth of the data tree may vary (although it should not exceed 8 or 9 levels) but I wanted to highlight this nonetheless.

javascript json algorithm recursion tree

Answer 1

Answer №1

One approach is to implement a recursive function with a for loop to find the desired node:

let data=[{id:777,name:"Level 1_section_1",children:[{id:778,name:"Level 2a",children:[]},{id:783,name:"Level 2b",children:[]}]},{id:786,name:"Level 1_section_2",children:[{id:781,name:"Level 2c",children:[]}]}];

const findNode = (arr, idToFind) => {
  for (const item of arr) {
    if (item.id === idToFind) {
      return item;
    }
    const possibleResult = findNode(item.children, idToFind);
    if (possibleResult) {
      return possibleResult;
    }
  }
};

console.log(findNode(data, 778));

Answer 2

One approach is to implement a recursive function with a for loop to find the desired node:

let data=[{id:777,name:"Level 1_section_1",children:[{id:778,name:"Level 2a",children:[]},{id:783,name:"Level 2b",children:[]}]},{id:786,name:"Level 1_section_2",children:[{id:781,name:"Level 2c",children:[]}]}];

const findNode = (arr, idToFind) => {
  for (const item of arr) {
    if (item.id === idToFind) {
      return item;
    }
    const possibleResult = findNode(item.children, idToFind);
    if (possibleResult) {
      return possibleResult;
    }
  }
};

console.log(findNode(data, 778));

Answer 3

Answer №2

Presented here is an enhanced findNode function that goes beyond searching by id exclusively. It now allows users to define a lambda function to search for nodes based on any condition -

findNode (n => n.id === 778, data)
// { id: 778, name: "Level 2a" }

findNode (n => n.name === "Level 2c", data)
// { id: 781, name: "Level 2c" }

findNode (n => n.id === 999, data)
// undefined

You can test the results in your own browser below -

const data =
    [{id:777,name:"Level 1_section_1",children:[{id:778,name:"Level 2a",children:[]},{id:783,name:"Level 2b",children:[]}]},{id:786,name:"Level 1_section_2",children:[{id:781,name:"Level 2c",children:[]}]}];

const None =
  Symbol ()

// findNode : (node -> boolean, node array) -> node?
const findNode = (f, [ node = None, ...nodes ]) =>
  node === None
    ? undefined
    : find1 (f, node) || findNode (f, nodes)

// find1 : (node -> boolean, node) -> node?
const find1 = (f, node = {}) =>
  f (node) === true
    ? node
    : findNode (f, node.children)

console.log (findNode (n => n.id === 778, data))
// { id: 778, name: "Level 2a" }

console.log (findNode (n => n.name === "Level 2c", data))
// { id: 781, name: "Level 2c" }

console.log (findNode (n => n.id === 999, data))
// undefined

In the code above, using destructuring assignment allows for a concise expression but introduces unnecessary intermediate values. The following revised version represents a significant enhancement -

// findNode : (node -> boolean, node array, int) -> node?
const findNode = (f, nodes = [], i = 0) =>
  i >= nodes.length
    ? undefined
    : find1 (f, nodes[i]) || findNode (f, nodes, i + 1)

// find1 : (node -> boolean, node) -> node?
const find1 = (f, node = {}) =>
  f (node) === true
    ? node
    : findNode (f, node.children)

Both versions provide short-circuit evaluation and will halt iteration as soon as the first result is found

Answer 4

Presented here is an enhanced findNode function that goes beyond searching by id exclusively. It now allows users to define a lambda function to search for nodes based on any condition -

findNode (n => n.id === 778, data)
// { id: 778, name: "Level 2a" }

findNode (n => n.name === "Level 2c", data)
// { id: 781, name: "Level 2c" }

findNode (n => n.id === 999, data)
// undefined

You can test the results in your own browser below -

const data =
    [{id:777,name:"Level 1_section_1",children:[{id:778,name:"Level 2a",children:[]},{id:783,name:"Level 2b",children:[]}]},{id:786,name:"Level 1_section_2",children:[{id:781,name:"Level 2c",children:[]}]}];

const None =
  Symbol ()

// findNode : (node -> boolean, node array) -> node?
const findNode = (f, [ node = None, ...nodes ]) =>
  node === None
    ? undefined
    : find1 (f, node) || findNode (f, nodes)

// find1 : (node -> boolean, node) -> node?
const find1 = (f, node = {}) =>
  f (node) === true
    ? node
    : findNode (f, node.children)

console.log (findNode (n => n.id === 778, data))
// { id: 778, name: "Level 2a" }

console.log (findNode (n => n.name === "Level 2c", data))
// { id: 781, name: "Level 2c" }

console.log (findNode (n => n.id === 999, data))
// undefined

In the code above, using destructuring assignment allows for a concise expression but introduces unnecessary intermediate values. The following revised version represents a significant enhancement -

// findNode : (node -> boolean, node array, int) -> node?
const findNode = (f, nodes = [], i = 0) =>
  i >= nodes.length
    ? undefined
    : find1 (f, nodes[i]) || findNode (f, nodes, i + 1)

// find1 : (node -> boolean, node) -> node?
const find1 = (f, node = {}) =>
  f (node) === true
    ? node
    : findNode (f, node.children)

Both versions provide short-circuit evaluation and will halt iteration as soon as the first result is found

Answer 5

Answer №3

Just for kicks, here's a code snippet that aims to retrieve all occurrences.

var data=[{id:777,name:"Level 1_section_1",children:[{id:778,name:"Level 2a",children:[]},{id:786,name:"Level 2b",children:[]}]},{id:786,name:"Level 1_section_2",children:[{id:781,name:"Level 2c",children:[]}]}]

var f = (o, pred, acc=[]) =>
  pred(o) ? [o] : Object.values(o).reduce((a, b) =>
    b && typeof b == 'object' ? a.concat(f(b, pred, acc)) : a, acc)

console.log(JSON.stringify(f(data, o => o.id == 781)))
console.log(JSON.stringify(f(data, o => o.id == 786)))

Answer 6

Just for kicks, here's a code snippet that aims to retrieve all occurrences.

var data=[{id:777,name:"Level 1_section_1",children:[{id:778,name:"Level 2a",children:[]},{id:786,name:"Level 2b",children:[]}]},{id:786,name:"Level 1_section_2",children:[{id:781,name:"Level 2c",children:[]}]}]

var f = (o, pred, acc=[]) =>
  pred(o) ? [o] : Object.values(o).reduce((a, b) =>
    b && typeof b == 'object' ? a.concat(f(b, pred, acc)) : a, acc)

console.log(JSON.stringify(f(data, o => o.id == 781)))
console.log(JSON.stringify(f(data, o => o.id == 786)))

Answer 7

Answer №4

One approach to solving this problem is by utilizing object-scan

An advantage of this method is the ability to access additional data in the filterFn function for further processing. However, it does come with the trade-off of introducing a dependency.

// const objectScan = require('object-scan');

const myData = [{ id: 777, name: 'Level 1_section_1', children: [{ id: 778, name: 'Level 2a', children: [] }, { id: 783, name: 'Level 2b', children: [] }] }, { id: 786, name: 'Level 1_section_2', children: [{ id: 781, name: 'Level 2c', children: [] }] }];

const treeSearch = (data, id) => objectScan(['**(^children$)'], {
  useArraySelector: false,
  abort: true,
  rtn: 'value',
  filterFn: ({ value }) => value.id === id
})(data);

console.log(treeSearch(myData, 778));
// => { id: 778, name: 'Level 2a', children: [] }

.as-console-wrapper {max-height: 100% !important; top: 0}

<script src="https://bundle.run/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b9b4bcb3b5a2fba5b5b7b896e7e5f8e1f8e7">[email protected]</a>"></script>

Disclaimer: The author behind object-scan

Answer 8

One approach to solving this problem is by utilizing object-scan

An advantage of this method is the ability to access additional data in the filterFn function for further processing. However, it does come with the trade-off of introducing a dependency.

// const objectScan = require('object-scan');

const myData = [{ id: 777, name: 'Level 1_section_1', children: [{ id: 778, name: 'Level 2a', children: [] }, { id: 783, name: 'Level 2b', children: [] }] }, { id: 786, name: 'Level 1_section_2', children: [{ id: 781, name: 'Level 2c', children: [] }] }];

const treeSearch = (data, id) => objectScan(['**(^children$)'], {
  useArraySelector: false,
  abort: true,
  rtn: 'value',
  filterFn: ({ value }) => value.id === id
})(data);

console.log(treeSearch(myData, 778));
// => { id: 778, name: 'Level 2a', children: [] }

.as-console-wrapper {max-height: 100% !important; top: 0}

<script src="https://bundle.run/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b9b4bcb3b5a2fba5b5b7b896e7e5f8e1f8e7">[email protected]</a>"></script>

Disclaimer: The author behind object-scan

Access any nested node within a JSON/JS object by specifying the key's value

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

tips for successfully transferring date and time data between json and nosql databases like firestore

The JQuery-AJAX script in my Django application, intended to show a preset value in a calculated field, is not functioning as expected

Checking for the existence of a row in Node.js using Sqlite3

Struggling to navigate the DOM using JavaScript and looking for guidance?

Utilizing the components within the range set by paper.setStart() and paper.setFinish() in Raphaels

What is the best way to navigate back to the previous state in reactjs?

JavaScript placeholder-type expression

Ways to implement the don't repeat yourself (DRY) principle in React JS with condition-based logic

JQuery post request not providing the expected response after posting

JavaScript code for Tree not functioning correctly on Internet Explorer

What is the correct method for notifying the progress of time using jQuery?

When transmitting JSON data from the View to the Controller in ASP.NET MVC, the received values are

Submitting forms using Ajax within a modal pop-up box

Menu secured in place within the wrapper

Ensuring the safety of PHP JSON output results on a web server

Raspberry Pi 4: My LED is only blinking 8 times instead of the expected 16 times

Tips for utilizing Selenium Webdriver to input text into a webpage textbox using onblur, onfocus, and onkeydown attributes

Retrieving Json data results in a boolean outcome

What is the best way to create a dynamic JavaScript counter, like one that counts the world's population

The functionality of the handleTextShow function in components>DrinkList.js is not working as expected after integrating an API