Format for storing data using JSON tree structure

Considering how to efficiently store and update data for a tree, let's think about a common scenario like a virtual dom in React.

One way to store a tree representing a dom in JSON format could look like this:

{
  nodeId: 'nodeId1',
  ...nodeData,
  childrenNodes: [
    {
      nodeId: 'nodeId2',
      ...nodeData,
      childrenNodes: [...]
    },
    ...
  ]
}

Now, we would typically traverse the tree using either BFS or DFS (React uses DFS) to locate a specific element for modification.

Alternatively, we could store the same tree in a hash table-like structure:

{
  nodeId1: {...nodeData, childrenNodes: [nodeId2]},
  nodeId2: {...nodeData, childrenNodes: [nodeId3, nodeId4]},
  ...
}

In this setup, retrieving a specific node could be O(1) since we can directly access nodes by their ids without traversing the entire tree.

When dealing with a large number of elements in a virtual dom, choosing one storage method over the other may not make much difference. However, having both structures simultaneously might not be ideal due to memory constraints, especially on older devices.

If each node has a unique id and there are references from child nodes to their parent, adding and removing nodes should be straightforward regardless of the chosen structure.

The ultimate decision is whether a general-purpose approach should be used or if a combination of both structures would be more efficient for rapid updates. Building a framework from scratch might benefit from incorporating both methods based on different use cases, but resource limitations on certain devices must also be considered.

Answer №1

Since no one responded, I will share my perspective based on further research and observations.

The hash solution suggested may offer quicker access to a node in certain situations. However, its complexity could pose challenges when trying to enhance the solution for other potential integrations. If I were to utilize arrays of ids, I would prefer to create a distinct structure exclusively for searching purposes rather than for updating multiple nodes simultaneously.

In most cases, opting for the more detailed tree outline would be logical and facilitate smoother operations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating new elements onto the page without causing the existing elements to re-render

My challenge involves working with a large array of objects, where each object corresponds to one element. To display these elements on the page, I utilize the map() function, but currently only the first 5 elements are being rendered initially. In order t ...

How can I create a script for a sliding/toggling menu?

Not sure if it's appropriate to ask, but I'm currently in search of a slide/toggle menu. Despite my efforts on Google, I haven't been able to find exactly what I need. As someone who is more skilled in HTML/CSS than jQuery or other scripting ...

Error encountered: Unable to remove certain elements from the array

http://jsfiddle.net/83m3B/ I am facing an issue where I am trying to remove certain elements from an array using the data-object-id attribute. However, when I implement it, the loop does not function as expected and seems to skip over an element each time ...

"Experiencing difficulties deploying Firebase functions - Encountering an error message stating 'Cannot read property 'firebase-admin' of

I'm currently facing an issue during the deployment of my Firebase functions and I am seeking assistance to resolve it. While the deployment itself appears to be successful, I keep encountering the following error: Cannot read property 'firebas ...

Instructions for inserting an anchor tag into the middle of a <p> element utilizing document.createElement("p")

When generating elements dynamically with JavaScript using document.createElement("p"), I am looking to create a paragraph element <p></p> that includes an anchor tag in the middle, creating a clickable link within the text. I aim to use JavaS ...

executing a hook within _app.tsx in Next.js

The issue I'm facing involves the rendering of a hook that helps determine if my components are within the screen's view to trigger animations. This hook is executed in _app.tsx, however, it doesn't run when switching to another page. Oddly ...

The console is showing an error message stating that the variable "i" is not

Currently, I am developing the dashboard for my discord.js bot. While working on it, I encountered an issue where a variable I created to select an array from my JSON file is being reported as undefined by the console. $(function() { $.getJSON( "./data/ ...

What is the best way to send variables from one page to another using jQuery or Javascript?

Is there a way to use POST with jQuery/Javascript to send data to another page and then redirect to that page? Instead of using GET... Using Javascript window.location = 'receivepage.php?variable='+testVariable; Once it's received by PHP ...

Utilizing jQuery grep() to sort through a JSON array

Despite my attempts to find a suitable example on this platform, I am still struggling to adapt them to my specific needs. Essentially, all I require is to filter some JSON results using the grep() function. Here is the JSON data that I am working with: ...

Conceal the parent component's <button> element within the Child component

I'm facing an issue with hiding a button in my parent component from the child component. I tried using props to bind the element and v-show directive to hide it, but instead of just hiding the button, it ends up hiding the entire tab. Take a look at ...

Is there a way to modify the starting position of my shapes in Three.js?

Is there a way to adjust the starting position of my geometry? Currently, it appears in the center of the canvas, but I would prefer it to be at the top left corner. Any suggestions on how to achieve this? scene = new THREE.Scene(); camera = new THRE ...

Passing the app variable from Express.js to routes

I am attempting to transfer some data from the app (variable defined as var app = express();) to some Socket.IO related code by sending a value to a middleware in a similar manner: function routes(app) { app.post('/evento', function (req, re ...

Looking to resolve an issue that is arising in the antd tree component

Having trouble with the antd tree component - when searching and checking/unchecking a field, all previously selected data is unchecked. I want to only update the field that is currently being changed. Not sure how to fix this issue, any help would be appr ...

Integrating a conditional statement into the existing for loop code to conceal the covers

My goal is to hide the covers after they are clicked using an if statement within the for loop code. I believe this is where it should be placed. Trying to prevent this action from happening. https://i.sstatic.net/eLSto.png I made an attempt at achievin ...

I can't seem to figure out why I continue to receive the error message stating that 'app.get is not a function'

Below is the code I am currently using: const request = require('request'); const app = require('express'); app.get('/', function (req, res) { res.send('hello world'); }); app.listen(3000); Unfortunately, I keep e ...

"Enhance the functionality of material-table by incorporating a multi-select feature

My data management has been made easier with Material-Table, but I have encountered a small issue. The code below shows how I currently get a select menu for my data. However, I am looking to have a multiselect menu instead, allowing me to save more than o ...

The code generated by Asto SSR may not be compatible with older iOS versions, causing it to fail to run

I have been running my astro SSR site on Netlify with great success. However, I recently encountered an issue when testing it on older iPhone models like the iPhone 6 and earlier. It seems that all script executions halt, rendering the site non-interactive ...

Global variable in Npm CLI

I'm working on a CLI tool that heavily relies on storing a unique identifier (uid). I attempted to use fs to store the uid; however, the file was created in the directory where the command was executed. #!/usr/bin/env node const program = require("co ...

Jquery each function not correctly retrieving all elements with the specified class

I created a page featuring a search box and 5 Bootstrap Cards. I set it up so that the cards would hide if the text typed in the search box does not match the content within the data-tags attribute. Everything seems to be working fine, except that it is on ...

SwipeJS experiencing technical difficulties

My Swipe.Js version : "^7.0.2" Today, I attempted to use Swipe.Js and encountered an issue with my import code. import { Swiper, SwiperSlide } from 'swiper/react'; as described on https://swiperjs.com/react#installation. However, when ...