Tips on organizing a JSON object for a JavaScript project

For my project, I am designing a data structure that utilizes JSON. My goal is to create an efficient method for searching and editing the JSON object. Which structure would be considered standard in this scenario? Is there a preferred way to implement either of these options?

The object with ID 2 has a parent with ID 1.

const items = [
    {
        id: 1,
        title: 'First',
        UUID: 123,
        action : null,
        isFolder: true,
        parent: null,
    },
    {
        id: 2,
        title: 'Second',
        UUID: 123,
        action : null,
        isFolder: false,
        parent: 1,
    },
    {
        id: 3,
        title: 'Third',
        UUID: 123,
        action : null,
        isFolder: false
        parent: null,
    },
]

Structure 2

const items = [
    {
        id: 1,
        title: 'First',
        UUID: 123,
        action : null,
        isFolder: true,
        children: [      
            {
                id: 2,
                title: 'Second',
                UUID: 123,
                action : null,
                isFolder: false,
                children: [],
            },
                ]
    },
    {
        id: 3,
        title: 'Third',
        UUID: 123,
        action : null,
        isFolder: false
        children: [],
    },
]

Answer №1

Option 1 seems like the best choice due to its simplicity and ease of editing individual nodes, searching, and readability for humans. Imagine a scenario where your data becomes nested too deeply - it would be challenging to navigate through. Moreover, consider the implications of changing a parent node or needing to support multiple parents in the future.

Ultimately, the decision between different structures depends on what aligns best with your application and future use cases. Have you thought about potential enhancements down the road? It's important to factor those into your decision-making process.

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

Are there any functions that work with an array of objects?

Is there a way to use includes function to check if an object is inside the array, as shown below: arr=[{name:'Dan',id:2}] When trying to check with includes like this: arr.includes({name:'Dan',id:2}) The result returned is false. I ...

"Using Sequelize's Op.and and Op.like operators led to an unexpected outcome of producing an empty

I am working on developing a search endpoint using express and sequelize. I noticed an issue where using Op.and in my 'where' object results in an empty object: const where = { [Op.and]: req.query.q.split(" ").map((q) => { ...

Tips for executing a JavaScript function within a secure sandbox environment

My current setup involves an application server developed in JavaScript (node.js) where I receive JS function code as input from a web browser. Now, my goal is to execute this function on the server without any interference with other processes. I am look ...

Enhancing the functionality of the Audio/HTMLMediaElement JavaScript object

Is there a way to modify the Audio object in order to add a stop function? The usual method is as follows: Audio.prototype.stop = function() { this.pause(); this.currentTime = 0; } However, when trying to implement this within a Chrome Extension ...

Oops! An issue occurred at ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 where a module cannot be located. The module in question is 'http'

I have been troubleshooting an issue with Next.js The error I am encountering => error - ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 Module not found: Can't resolve 'http' Import trace for req ...

Retrieving HTML file from server directory within extjs HTML editor

Can anyone help me figure out how to successfully load an HTML file into the code editor? I have attempted using the code below, but it doesn't seem to be working: loader : {url : 'uploads/temp.html', autoload : true} ...

Sending a div class as a parameter to a JavaScript function

Wondering if it's possible to pass a div's class into a JavaScript function. I'm using SquareSpace so adding an id to the div is not an option, but it works fine with divs that have ids. JQuery is already loaded. This is my current train of ...

Can you offer advice on creating jasmine tests for an Angular controller and service similar to this?

I've been struggling with this issue for hours, mainly because I'm still new to Jasmine and AngularJS. The problem lies within my controller. angular.module('toadlane.controllers', []). controller('MainController', functi ...

combine two separate typescript declaration files into a single package

Can anyone help me figure out how to merge two typescript definition packages, @types/package-a and @types/package-b, into one definition package? package-a.d.ts [export package-a {...}] package-b.d.ts [exports package-b {...}] package-mine.d.ts [ export ...

Utilize JQuery to modify hover state when focused and restrict tab navigation to specific areas on the keyboard

I'm currently working with a JQgrid in one of my projects (Check out the JFiddle here). and I have some specific requirements: 1.) I want the save & cancel button to become highlighted when a user tabs to it, similar to how it behaves on mouse ov ...

Issue with HighCharts Series Data Points Not Being Added

I am currently facing a major challenge in dynamically changing data for highcharts based on date. To provide context for my project, it involves logging system data with timestamps. I have implemented a date and time picker to specify the start and end da ...

Notifying with Socket.IO in Node.js

Hey there, I'm currently working on implementing a notification system but have hit a roadblock. I've sent an invitation to a user to join the club. socket.on("notify", async (message) => { // invite the user John Doe io.to('socke ...

Why is it that Angular is unable to locate the component factory for my component, even though I have declared it in the entryComponents option of my Module?

Is there a way to dynamically create and show a component in an ngx-bootstrap's modal? I attempted to declare the component in the entryComponents option of RegMktRiskHomeModule, but it did not work. Currently, I am only able to declare the Scenarios ...

Encountering a fatal error while trying to load a skin from a .json file in LibGdx

Recently I encountered an issue while using Intellij. Previously, everything was running smoothly, and the APK deployed on my Android device without any problems. However, now it seems to get stuck on a black screen and then returns to the home screen with ...

AngularJS redirection causes the previous template to quickly appear and then disappear

This particular question has been circulating without a satisfactory resolution for some time, so hopefully the information provided here will help clear up any confusion. Essentially, I have an object called resolve attached to my routes, set up like thi ...

Decoding a JSON string array in PHP

When encoding data, I utilized the following code: $cont = json_encode(array_chunk($arr_content, 1, true)); The output of var_dump($cont) after encoding is: string(2670) "[[""],{"1":"Synonyms for good<\/b> at Thesaurus.com with free online th ...

Having trouble with sending a post request through ajax

Whenever I try to initiate an Ajax request upon clicking a button, the request never seems to get executed. Below is the snippet of my HTML code : <!DOCTYPE html> <html lang="en"> <head> <title>User Form</title> ...

Gulp halts when watching code and reloads upon any changes made

Hey there, I'm new to GULP and could use some help... I've been trying to configure GULP for a template that uses AngularJS. When I run the gulp command, the console displays the message "**Done Waching code and reloading on changes" but nothing ...

Utilizing JavaScript or jQuery to adjust the cursor pointer value based on user input

Issue: Need help with live updating of input value to range input pointer [Check out my CodePen for reference][1] Adjust upper range input pointer based on lower range input pointer ][2] I am currently working on a range-to-range calculator for a book ...

Picture in a clear background without any alteration

Is there a way to create a background-color with opacity inside an image without affecting the image itself? The issue lies in the fact that the transparent background-color makes everything underneath it, including text and the image, transparent. Below ...