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

Tips for delaying my response in nodejs until the loop is complete

This is the code I'm currently working with: myinsts.forEach(function (myinstId) { Organization.getOrgById(myinstId,function (err, insts) { res.json(insts); }) }); I am using Node.js and encountering an error message that says "Can't set hea ...

Ways to prevent the execution of JavaScript code?

I have a website that contains a block where AJAX-loaded code is coming from a remote server. How can I prevent potentially harmful code from executing, especially when it originates from a remote source? Is using the "noscript" tag sufficient to protect a ...

Display only the labels of percentages that exceed 5% on the pie chart using Chart JS

I'm currently diving into web development along with learning Chart.js and pie charts. In my project, the pie chart I've created displays smaller percentage values that are hardly visible, resulting in a poor user experience on our website. How c ...

extract the ng-model data and send it to an angular directive

In my current project, I have a specific situation where there are multiple text-boxes and when any of them is clicked, the corresponding ng-model should be displayed in the browser console. To achieve this functionality, I came up with the following Angul ...

Creating dynamic content with Jquery templates using nested JSON objects

Currently, I am working on an app where I need to showcase a student's progress card using jQuery templates. However, I have encountered a difficulty while dealing with a JSON string as shown below: "[{"ID":1, "Name":"Frank", "Age":15, "Status":"Pass ...

What is the method for assigning a class name to a child element within a parent element?

<custom-img class="decrease-item" img-src="images/minus-green.svg" @click="event => callDecreaseItem(event, itemId)" /> Here we have the code snippet where an image component is being referenced. <template&g ...

A guide on extracting keywords from the tynt API using JavaScript

Looking to extract the inbound keyword from an API: What would be the best way to use JavaScript to extract and display the value of the inbound keyword from this API? ...

Utilizing JQuery to extract information from the Bing Search API in JSON format

Having some trouble parsing the JSON from Bing Search API Version 7 with this code. I'm specifically looking to extract "name" and "url" fields. Here's my current code: You can find the Bing JSON Results here. let query = escape($('#book&ap ...

Refresh ng-repeat array after implementing filter in controller

I am currently facing an issue with updating my table view when changing a variable that filters an array. The filter is applied in the controller based on the values of a specific variable called columnFilter. However, the filter does not reapply to updat ...

Loading SVGs on the fly with Vue3 and Vite

Currently, I am in the process of transitioning my Vue2/Webpack application to Vue3/Vite. Here's an example of what works in Vue2/Webpack: <div v-html="require('!!html-loader!../../assets/icons/' + this.icon + '.svg')" ...

Consistently scaling the Embla carousel slides for a seamless presentation experience

In my current project, I am utilizing Embla Carousels and aiming to incorporate a smooth slide scaling effect as users scroll through. The idea is for slides to enlarge the closer they get to the left edge of the carousel container, then decrease in size r ...

Crushing jQuery's Sortable/Droppable

Having a little issue here. I want to be able to toggle the sortable plugin's behavior by clicking a button - basically switching between sort mode and view mode. I've attempted to achieve this with the following code: function enterSortMode(){ ...

Receiving the error message "Encountered SyntaxError: Unexpected token )" when using a custom directive

Encountering an issue with the customer directive of auto-complete, as I am receiving the error Uncaught SyntaxError: Unexpected token ). This error is displayed in the console of the chrome browser as VM80623:1 Uncaught SyntaxError: Unexpected token ). Cl ...

Is it achievable to animate the offset with React Native Animated?

I am attempting to develop a dynamic drag and drop functionality, inspired by this example: My goal is to modify it so that when the user initiates the touch, the object moves upwards to prevent it from being obscured by their finger. I envision this move ...

What could be causing express to have trouble finding the ejs file in the views directory?

Recently delved into the world of learning NodeJS and Express. // Working with express framework var express = require("express"); var app = express(); app.get("/", (req,res) => { res.render("home.ejs"); }) //Setting up port listening app.listen ...

Discovering the central point within an SVG path

I am currently working with a path that is part of a group and using Jquery to locate the specific path. My goal is to find the midpoint of that path. I came across an example here. However, when attempting to use .getTotalLength(); or .getPointAtLength(), ...

Learn how to securely download files from an Azure Storage Container using Reactjs

I'm currently working on applications using reactjs/typescript. My goal is to download files from azure storage v2, following a specific path. The path includes the container named 'enrichment' and several nested folders. My objective is to ...

update value asynchronously

My implementation involves a dialog controller: .controller('loadingDialogCtrl', function($scope, $mdDialog, $rootScope, loadingDialog) { $scope.loadingDialog = loadingDialog; }); In another controller, I use the dialog controller and manip ...

What could be causing my JavaScript alert to not appear on the screen?

Essentially, I've been attempting to trigger a Javascript alert using PHP. However, the alert isn't functioning at all. This is my echo statement that dynamically generates the alert echo "<script>alert('Uploaded file was not in the ...

Creating a JSON file with Python that stores a collection of keywords for future parsing tasks

# Module for adding keywords and saving them to a JSON file. import json keywords_list = [] def load_keywords(): """Loads the JSON file to retrieve keywords.""" with open('keywords.json') as kl: ke ...