Creating a tree structure from a one-dimensional array with the help of dual data tables in JavaScript

I'm struggling to create a tree structure from a flat array using two Mock data tables in JSON. The table should match the unique IDs to determine the hierarchy between them.

JSON with Groups DB array example:

 {
"group": [
    {
        "groupName": "ROOT",
        "id": 1
    },
    {
        "groupName": "Family",
        "id": 9
    },
    {
        "groupName": "BestFriends!",
        "id": 10
    },
     {
        "groupName": "Cars",
        "id": 4
    },
      {
        "groupName": "funHouse",
        "id": 3
    }

]
 };

JSON including Users array example:

 {
"user": [
    {
        "username": "StrongGoose",
        "password": "sdff12fdsa",
        "age": 31,
        "id": 2
    },
    {
        "username": "John",
        "password": "sdjd34fffdsa",
        "age": 31,
        "id": 3
    },
    {
        "username": "Mary",
        "password": "sdfffdsa",
        "age": 31,
        "id": 4
    }
]
 };

This is how the first data table looks and determines the hierarchy between groups:

 {
"GroupsToGroups": [
    {
        "1":[9,10]
    },
    {
        "10":[3]
    }

]
 };

The second one shows which user belongs to which group:

 {
"GroupsToUsers": [
    {
        "11":[2]
    },
    {
        "3":[3]
    },
    {
        "4":[4]
    },
    {
    "10":[2] 
    },
    {
    "3":[3] 
    }
   ]
  };

The desired Hierarchy format written in JSON:

 [
{
    "type": "group",
    "id": "1",
    "name": "ROOT",
    "items": [
        {
            "type": "group",
            "id": "9",
            "name": "Family",
            "items": []
        },
        {
            "type": "group",
            "id": "10",
            "name": "BestFriends!",
            "items": [
                {
                    "username": "StrongGoose",
                    "password": "sdff12fdsa",
                    "age": 31,
                    "id": 2
                },

                {
                    "type": "group",
                    "id": "3",
                    "name": "funHouse",
                    "items": [
                        {
                            "username": "John",
                            "password": "sdjd34fffdsa",
                            "age": 31,
                            "id": 3
                        },
                        {
                            "type": "group",
                            "id": "4",
                            "name": "Cars",
                            "items": [
                                {
                                    "username": "Mary",
                                    "password": "sdfffdsa",
                                    "age": 31,
                                    "id": 4
                                }
                            ],
                        }
                    ]
                }
            ]
        }

    ]
  }


 ];

Edit: I have attempted to create a recursive function that finds the relevant related groups. It works but I am unsure of how to combine the users.

 function checkChildren(group) {
  const allChildren = insideGroups[group.id];
  if (!allChildren) return group;
  const childGroups = allChildren.map((findChildrenID) => {
      const indexGroups = groups.findIndex((subGroup) => subGroup.id === 
    findChildrenID);
    return checkChildren(groups[indexGroups]);
    });
   return Object.assign({}, group, {groups: childGroups});
   }

Answer №1

If you implement a hash table for different types of data, it can significantly increase access speed without the need to iterate through arrays of objects.

When dealing with users, creating a new object with modified properties and keys is necessary.

Additionally, a new property needs to be added to the root objects and included in the groups.groups property to ensure consistent access across all levels.

To retrieve all objects, start by iterating through groups.users followed by groups.groups. Don't forget to also include children for groups.

In the provided data, redundant or unused information has been commented out.

function getNodes(node) {
    return [
        ...(hash.groups.users[node] || []).map(id => hash.user[id]),
        ...(hash.groups.groups[node] || []).map(id => Object.assign(hash.group[id], { children: getNodes(id) }))
    ];
}

var db = {
        group: [
            { groupName: "ROOT", id: 1 },
            { groupName: "Family", id: 9 },
            { groupName: "BestFriends!", id: 10 },
            { groupName: "Cars", id: 4 },
            { groupName: "funHouse", id: 3 }
        ],
        user: [
            { username: "StrongGoose", password: "sdff12fdsa", age: 31, id: 2 },
            { username: "John", password: "sdjd34fffdsa", age: 31, id: 3 },
            { username: "Mary", password: "sdfffdsa", age: 31, id: 4 }
        ],
        GroupsToGroups: [
            { 1: [9, 10] }, // ok
            { 10: [3] },    // second
            { 3: [4] }
        ],
        GroupsToUsers: [
            //{ 11: [2] }, // never used
            { 3: [3] },
            { 4: [4] },
            { 10: [2] },   // first
            //{ 3: [3] }   // dupe
        ]
    },
    hash = {
        group: Object.assign(...db.group.map(({ id, groupName: name, type = 'group' }) => ({ [id]: { type, id, name } }))),
        user: Object.assign(...db.user.map(o => ({ [o.id]: o })),
        groups: {
            groups: Object.assign(...db.GroupsToGroups, { root: db.group.filter(({ groupName }) => groupName === 'ROOT').map(({ id }) => id) }),
            users: Object.assign(...db.GroupsToUsers)
        }
    },
    result = getNodes('root');

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

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

Crafting redirect rules in React that avoid redirecting to the same route

In my project, there is a file named AuthenticatedRoute.tsx, which serves as a template for all the protected/authenticated routes in my Router.tsx file. export default ({ component: C, authUser: A, path: P, exact: E }: { component, authUser, path, ex ...

What is the best way to transform the pages extracted through the Notion API into slugs?

I'm new to Next.js and Notion API, and I want to create a blog site on my personal website using the Notion API. While I can easily pull the posts, I am facing a challenge in slugifying the endpoint IDs with post titles. When attempting this based on ...

Hold off on running the code until the image from the AJAX request is fully loaded and

Currently, I am facing a challenge with my code that aims to determine the width and height of a div only after it has been loaded with an image from an AJAX request. The dimensions of the div remain 0x0 until the image is successfully placed inside it, c ...

Adding a class to a Vue component using the $refs property

I am facing an issue where I need to add dynamic class names to various Vue components based on their reference names listed in a configuration file. Manually adding classes to each component is not feasible due to the large number of components. To addre ...

Exploring multidimensional arrays in PHP

Looking to extract information from a complex array structure $myArray = array( array('id' => 6), array( 'id' => 3, 'children' => array( 'id' => 5, 'c ...

Can variables in JavaScript clash with input names in HTML?

I have the following code in an HTML file: <input type="..." name="myInput1" /> Then, in a JS file associated with this HTML file, I declare a variable to store the value of that input after it loses focus: var myInput1; Should I be concerned abo ...

Tips for accessing a website and logging in to extract important data for scraping purposes

Currently facing an issue with scraping data from a website that requires logging in. I've been attempting to use the node request package for the login process, but so far have been unsuccessful. The code snippet I'm currently using is: var j = ...

Using javascript to store HTML tags in a variable

Hey there, I have a quick question. Can someone help me figure out why this code isn't working? let plus = "+" + '<h1>'+"This is a heading"+'</h1>'; When I run the code, the output I get is: +<h1 ...

Accessing React Context globally using the useContext hook

I'm feeling a bit puzzled about how the useContext hook is intended to function in a "global" state context. Let's take a look at my App.js: import React from 'react'; import Login from './Components/auth/Login'; import &apos ...

Tips on combining two associative arrays

I am facing a challenge with two associative arrays that look like this: Array ( [0] => Array ( [0] => 2022-01-19 [1] => 6 ) [1] => Array ( [0] => 2022-01-20 [1] => 1 ) [2] => Array ( ...

When the PHP response is received by AJAX, an error occurs due to a failed JSON parsing request

Every time I try to run my small JavaScript code with an AJAX call to PHP, it keeps coming back with a JSON parser error. In the PHP code, I can see that the JSON is populated with an array like this: json encode: {"Year":"2012","Make":"Ford","Model":"Tau ...

Am I on the right track with my service definition in Angular?

(function(){ angular.module('myApp',[]) })(); (function(){ angular.module('myApp.dashboard',[]) })(); (function(){ angular.module('myApp.value',[]) })(); (function(){ 'use strict'; angular.modu ...

Retrieve information from a JSON file according to the provided input

Can someone help me fetch data based on user input in JavaScript? When the input is 'Royal Python', I'm supposed to retrieve details about it. However, the code provided gives an error stating 'The file you asked for does not exist&apo ...

Refresh a div using jQuery and include PHP files for dynamic content updating

This is the code I am using to dynamically update divs containing PHP files: $(document).ready(function() { setInterval(function() { $('#ContentLeft').load('live_stats1.php').fadeIn("slow"); $('#ContentRight').load( ...

Tips for successfully incorporating a jQuery plugin into your React project

I'm attempting to incorporate the Air Datepicker library by t1m0n into my React application, but I'm encountering difficulties. import React from 'react'; import AirDatepicker from 'air-datepicker'; class Datepicker extend ...

The content section sits discreetly behind the sidebar

Upon loading my Bootstrap 5 webpage, the toggle button successfully moves the navbar and body section to show or hide the full sidebar. However, an issue arises where the body section goes behind the sidebar when using the toggle button. Below is a portio ...

I am puzzled as to why it is searching for an ID rather than a view

Currently, I am attempting to navigate to a specific route that includes a form, but for some unknown reason, it is searching for an id. Allow me to provide you with my routes, views, and the encountered error. //celebrities routes const express = requir ...

Creating dynamic axes and series in Ext JS 4 on the fly

I am looking to dynamically generate the Y axis based on a JSON response. For example: { "totalCount":"4", "data":[ {"asOfDate":"12-JAN-14","eventA":"575","eventB":"16","eventC":"13",...}, {"asOfDate":"13-JAN-14","eventA":"234","eventB":"46","even ...

Traverse an array in JavaScript and display the elements

I am new to JavaScript and struggling with a question. I have an array of 120 numbers that I want to loop through, printing out specific words based on certain conditions. For example, if a number is divisible by 3, I need to print "Go", if divisible by 5, ...

The identical page content is displayed on each and every URL

Implementing a multi-step form in Next JS involves adding specific code within the app.js file. Here is an example of how it can be done: import React from "react"; import ReactDOM from "react-dom"; // Other necessary imports... // Add ...