Guide to building a hierarchical data object with JavaScript

Prior

This object consists of multiple rows:

  {
  "functions": [
    {
      "package_id": "2",
      "module_id": "2",
      "data_id": "2"
    },
    {
      "package_id": "1",
      "module_id": "1",
      "data_id": "2"
    },
    {
      "package_id": "2",
      "module_id": "3",
      "data_id": "3"
    }
  ]
}

Intended outcome

I aim to transform this into a "nested" Object as shown below, eliminating any duplicates:

{
  "packages": [
    {
      "package_id": "2",
      "modules": [
        {
          "module_id": "2",
          "data": [
            {
              "data_id": "2"
            }
          ]
        },
        {
          "module_id": "3",
          "data": [
            {
              "data_id": "3"
            }
          ]
        }
      ]
    },{
      "package_id": "1",
      "modules": [
        {
          "module_id": "1",
          "data": [
            {
              "data_id": "2"
            }
          ]
        }
      ]
    }
  ]
}

I've experimented with nested loops and creating arrays and objects, but it led to either duplicates or merging objects. Is there a more generic approach to achieve this using JavaScript? (Specifically for an Angular (6) project.

Instance 1

getFunctionPackage() {

        var fList = this.functionList;

        var dArr = [];
        var dObj = {};

        var pArr = [];
        var pObj = {};

        var mArr = [];
        var mObj = {};

        for (var key in fList) {

            pObj['package_id'] = fList[key]['package_id'];
            mObj['module_id'] = fList[key]['module_id'];
            dObj['data_id'] = fList[key]['data_id'];

            for (var i = 0; i < pArr.length; i++) {
                if (pArr[i].package_id != pObj['package_id']) {
                    pArr.push(pObj);
                }
                for (var x = 0; x < mArr.length; x++) {
                    if (pArr[i]['modules'][x].module_id != mObj['module_id']) {
                        mArr.push(mObj);
                    }
                    for (var y = 0; y < dArr.length; y++) {
                        if (pArr[i]['modules'][x]['datas'][y].data_id != dObj['data_id']) {
                            dArr.push(dObj);
                        }
                    }
                }
            }

            if (dArr.length == 0) {
                dArr.push(dObj);
            }
            mObj['datas'] = dArr;

            if (mArr.length == 0) {
                mArr.push(mObj);
            }
            pObj['modules'] = mArr;

            if (pArr.length == 0) {
                pArr.push(pObj);
            }
            dObj = {};
            mObj = {};
            pObj = {};
        }
    }

Instance 2: Leads to skipping because of boolean values

 var fList = this.functionList;

var dArr = [];
var dObj = {};

var pArr = [];
var pObj = {};

var mArr = [];
var mObj = {};

var rObj = {};

for (var key in fList) {

    pObj['package_id'] = fList[key]['package_id'];
    mObj['module_id'] = fList[key]['module_id'];
    dObj['data_id'] = fList[key]['data_id'];

    var pfound = false;
    var mfound = false;
    var dfound = false;
    
    for (var i = 0; i < pArr.length; i++) {
        if (pArr[i].package_id == pObj['package_id']) {
            for (var x = 0; x < mArr.length; x++) {
                if (pArr[i]['modules'][x].module_id == mObj['module_id']) {
                    for (var y = 0; y < dArr.length; y++) {
                        if (pArr[i]['modules'][x]['datas'][y].data_id == dObj['data_id']) {
                            dfound = true;
                            break;
                        }
                    }
                    mfound = true;
                    break;
                }
            }
            pfound = true;
            break;
        }
    }
    if (!dfound) {
        dArr.push(dObj);
        mObj['datas'] = dArr;
        dObj = {};
    }

    if (!mfound) {
        mArr.push(mObj);
        pObj['modules'] = mArr;
        mObj = {};
    }

    if (!pfound) {
        pArr.push(pObj);
        pObj = {};
    }

    dArr = [];
    mArr = [];
}

rObj['packages'] = pArr;
console.log(rObj);

Answer №1

Here is a versatile technique using Array#reduce() to construct a grouped object with package IDs as keys. Any loop iteration method such as for() or forEach() can be utilized to achieve the same result.

Afterwards, employ Object.values() to extract the final array from the grouped object.

The use of functions like Array#find() streamlines the process of checking if a module already exists within each package.

const grouped = data.functions.reduce((a, c )=>{

   // Create or use existing group object
   a[c.package_id] =  a[c.package_id] || {package_id : c.package_id, modules: [] }
   
   // Reference to group modules array
   const mods = a[c.package_id].modules
   
   // Check if module object exists in the modules array
   let module = mods.find(mod => mod.module_id === c.module_id)

   if(!module){
      // Create new module object
      module = {module_id: c.module_id, data:[]}
      // Push it into modules array
      mods.push(module);
   } 

   // Add new data object to module data array
   module.data.push({data_id: c.data_id})
   
   return a

}, {})


// Generate final results object
const res = { packages : Object.values(grouped) }

console.log(res)
.as-console-wrapper {max-height: 100%!important;}
<script>
  const data = {
    "functions": [{
        "package_id": "2",
        "module_id": "2",
        "data_id": "2"
      },
      {
        "package_id": "1",
        "module_id": "1",
        "data_id": "2"
      },
      {
        "package_id": "2",
        "module_id": "3",
        "data_id": "3"
      }
    ]
  }
</script>

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

Learning fundamental MVC concepts with Express.JS

Express.js offers a basic framework for implementing the standard MVC development pattern. However, many tutorials I have come across tend to mix controller logic within route files or a global app file. In an ideal scenario: Model - Manages core behavio ...

Comparison of utilizing PHP within CSS versus Implementation through JavaScript [General]

Curious about the incorporation of PHP in CSS, especially in relation to my current Wordpress Theme project. I am aiming for high levels of customization and have been using a JS file to change CSS Properties through PHP. However, I'm not entirely con ...

Unable to retrieve results from JSON using JQUERY

I'm facing an issue with an app I created that consumes a JSON array. The syntax used is Jquery 1.9 The logic involves retrieving values from a textbox (stored in the valobj variable) and then displaying them in the toprightsec div area. $("#btnsea ...

What is the best way to retrieve multiple elements by class and change their innerHTML?

Encountering an issue with calling multiple elements of the same class using .innerhtml. Here is the URL I am dealing with: When running the following code in Chrome console, this is the output: document.getElementsByClassName('a-size-small a-color- ...

Guide to inserting text into an html element upon clicking an ASP:Button

In my code, there is a DIV that holds some text. Accompanying the text is an asp:Button. When this button is clicked, I aim to access and save this particular text. Nonetheless, it seems that once the button is clicked, the content of the DIV resets - lik ...

My goal is to exclusively create illustrations of items within a camera's view

Currently, I am using THREEJS to create a dynamically generated 'minecraft' world utilizing a perlin noise generator. Check out the progress so far: Block World Everything is going smoothly except that I am facing significant performance issues ...

Issue encountered when attempting to update a specific element within an array using Mongoose

Looking to update a specific object within an array. { "_id": "543e2f8e769ac100008777d0", "createdDate": "2014-10-15 01:25 am", "cancle": false, "eventDateAndTime": "2014-02-12 12:55 am", "eventstatus": true, "userPhone": "44444444 ...

What is the best way to invoke an HTML file using a jQuery function in a JavaScript file?

When I call an HTML file from a jQuery function using require(), I am encountering an issue where I am unable to link the CSS with the HTML file. After running the file, only plain HTML is displayed without any styling. The structure of my HTML file is as ...

Trouble arises when attempting to showcase document fields in MongoDB

As a beginner in programming, I am putting in my best effort to figure things out on my own. However, I seem to be stuck without any guidance. I am attempting to display all products from the mongoDB based on their brand. While I have successfully set up a ...

Iterate over Observable data, add to an array, and showcase all outcomes from the array in typescript

Is there a way to iterate through the data I've subscribed to as an Observable, store it in an array, and then display the entire dataset from the array rather than just page by page? Currently, my code only shows data from each individual "page" but ...

What is the best way to extract text directly from a span element without including the text of its child nodes?

I am dealing with a piece of HTML that is dynamically generated, and it looks like this: <span> 10/10/2012 <div class="calendar"> lots of text elements here </div> </span> Is there a way to specifically retrieve the tex ...

Is Restangular taking forever to resolve the promise?

Just starting out with JavaScript and AngularJS, and this particular issue has me stumped. Requirements A RESTful service that retrieves data from the backend AngularJS 1.2.21 and Restangular 1.4.0 being used An AngularJS controller tasked with requesti ...

The application appears to be overloaded with tasks on its main thread, potentially causing errors

I am currently in the process of developing an app for user login and registration. The app relies on receiving a JSON response from a webservice to interact with the database. However, during the registration process, I encountered the following error mes ...

Guide to retrieving a JSON object from an Azure Function using Node.js

When utilizing Azure Functions, how can you successfully return a JSON object in the response body from a node.js function? While it's straightforward to return a string, I encountered difficulties when attempting to return a JSON object as demonstrat ...

Dealing with throwing Exceptions in jest: A guide for developers

I have developed a method that throws an exception when the provided password does not match a regex pattern. I attempted to handle this in Jest. it('Should prevent insertion of a new user if the password doesn't match the regex', async () ...

Activate on click using JavaScript

When a link with the class .active is clicked, I want to use a JavaScript function to deactivate any other active links. The structure of the code should be as follows: <ul class="product"> <li><a href="#myanmar" class="active">Mya ...

How to dynamically reference an input textbox ID using javascript or jquery

I have a button titled: GridView1__ctl2_AddButton0 While I can extract the middle part "ctl2" (and variations for each row), I am trying to use it to populate a textbox among many with similar names. GridView1__ctl2_txtStormTimeOn Currently, I could ac ...

Retrieve all data in JSON format using Flask SQLAlchemy

I'm currently working on fetching and serializing user data from my database, but I've encountered an issue where I can only retrieve one user at a time. Here's the serialize method I'm using: def serialize(self): return { ...

The property 'get' cannot be accessed because the axios module of vue__WEBPACK_IMPORTED_MODULE_0__ is undefined

Having some trouble with Vue and Axios - encountering the following error message: [Vue warn]: Error in created hook: "TypeError: can't access property "get", vue__WEBPACK_IMPORTED_MODULE_0__.default.axios is undefined" Here's the code snippet: ...

Using jQuery to handle multiple buttons with the same ID

Is there a way to address the issue of multiple buttons sharing the same id? Currently, when clicking on any button, it only updates the record with id=1. How can this problem be resolved? div id="ShowPrace"> <?php try { $stmt = $pdo->prepare(" ...