Organizing data with JavaScript: Transforming a flat array into nested JSON structures

In my front-end TypeScript file, there is a list called poMonths:

0: {id: 1, companyName: "company14", companyId: 14, flActive: true, purchaseMonth: "2019-12-15T00:00:00", purchaseMonthString: "Dec-2019" , year: 2019, month: "December"}
1: {id: 2, companyName: "company5", companyId: 5, flActive: true, purchaseMonth: "2019-12-15T00:00:00", …}
2: {id: 3, companyName: "company13", companyId: 13, flActive: true, purchaseMonth: "2019-11-15T00:00:00", …}
3: {id: 4, companyName: "company14", companyId: 14, flActive: true, purchaseMonth: "2019-11-15T00:00:00", …}
4: {id: 5, companyName: "company5", companyId: 5, flActive: true, purchaseMonth: "2019-10-15T00:00:00", …}
5: {id: 6, companyName: "company14", companyId: 14, flActive: true, purchaseMonth: "2020-09-15T00:00:00", …}
6: {id: 7, companyName: "company7", companyId: 7, flActive: true, purchaseMonth: "2020-09-15T00:00:00", …}

I want to transform this list into a nested tree JSON structure grouped by companyName and year properties, similar to the image below but in JSON format:

https://i.sstatic.net/uPjPm.png

I found some code snippet that partially achieves this, but it needs some tweaking:

keys = [
    'year',
    'companyName'
  ];

groupBy() {
    const drill = (o, key, ...keys) =>
      key ? drill((o[key] = o[key] || {}), ...keys) : o;
    const result = {};
    for (const e of this.poMonths) {
      const key = drill(
        result,
        e.companyName,
        e.year,
        e.month
      );
    }
    return result;
  }

How can I modify the code to make it work as intended?

Answer №1

To construct your tree structure, utilize the array.reduce() method. Begin with an empty object and assign a default value whenever a specific key does not have an object/array defined yet (the right side of the || operator is executed in such cases):

let input = [{id: 1, companyName: "company14", companyId: 14, flActive: true, purchaseMonth: "2019-12-15T00:00:00", year: 2019, month: "December"},
{id: 2, companyName: "company5", companyId: 5, flActive: true, purchaseMonth: "2019-12-15T00:00:00", year: 2019, month: "December"},
{id: 3, companyName: "company13", companyId: 13, flActive: true, purchaseMonth: "2019-11-15T00:00:00", year: 2019, month: "November"},
{id: 4, companyName: "company14", companyId: 14, flActive: true, purchaseMonth: "2019-11-15T00:00:00", year: 2019, month: "December"},
{id: 5, companyName: "company5", companyId: 5, flActive: true, purchaseMonth: "2019-10-15T00:00:00", year: 2019, month: "October"},
{id: 6, companyName: "company14", companyId: 14, flActive: true, purchaseMonth: "2020-09-15T00:00:00", year: 2020, month: "September"},
{id: 7, companyName: "company7", companyId: 7, flActive: true, purchaseMonth: "2020-09-15T00:00:00", year: 2020, month: "September"}]

let months = { "09": "September", "10": "October", "11": "November", "12": "December" }

let result = input.reduce((state,current) => {
   let {companyName, year, month} = current;
   
   let company = state[companyName] || (state[companyName] = {});
   let yearObj = company[year] || (company[year] = {});
   let monthArr = yearObj[month] || (yearObj[month] = []);
   monthArr.push(current);
   
   return state;
}, {});

console.log(result);

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

Fix for fixed scrolling in the navigation bar

Having a website that receives traffic from different countries, including Portugal and other non-English speaking places, I decided to add a translation option. However, I encountered an issue with Google's translate feature which displays a banner a ...

Dealing with JSON response after an update operation in Rails 3

I need some help understanding the response to my unedited controller method. Here's the code: def update @ledgeritem = Ledgeritem.find(params[:id]) respond_to do |format| if @ledgeritem.update_attributes(params[:ledgeritem]) ...

The observed function remains untouched

In my code, I have an if condition inside a function that looks like this: public setOption() { setTimeout(() => { if (this.isCMode && !this.quest['isCompleted']) { this.toggleOption(false); } },window['TIME ...

Issue: A React component went into suspension during the rendering process, however, no alternative UI was designated

I'm currently experimenting with the code found at https://github.com/adarshpastakia/ant-extensions/tree/master/modules/searchbar Although I followed the tutorial instructions, I encountered an error. Could it be that the library is malfunctioning? I ...

Exploring a JavaScript object to verify if a property contains nested data elements

I am currently working on traversing through the object above in order to determine if a contact is a member of a specific list. For instance, if the user is a member of the list with an ID of 2022, I want to display their first name (which is also includ ...

Hide the burger menu when a link is clicked

Is there a way to make my Bootstrap burger menu automatically close when the user clicks on a menu link, rather than having to click on the burger itself? I've tried using some JavaScript code but it ends up disabling the burger menu entirely. Can any ...

Guide to extracting JSON data in my webpage obtained from a POST request

My current code snippet contains the following requests: >>> data {'AmountInUSD': '40', 'CreditCardLastFourDigits': '1111'} >>> r=requests.post('http://localhost:8000/api/v1.0/balance/deposit/ ...

Retrieve data from an array and insert it into a SQL database by matching the array element with

Currently, I am attempting to send a JSON payload to SQL in order to import a specific column. Within the JSON data, there is a segment structured like this: "Custom":[ {"id":100, "value" 8 }, {"id":200, ...

Troubleshooting: Why is my Angular Ionic Reactive Form not showing up on the

I'm currently experiencing an issue with my Angular/Ionic form, where the form controls are not displaying correctly on the web. My goal is to create a dynamic form that allows users to input the number of groups and students for each year. However, w ...

What is the most efficient way to perform an inline property check and return a boolean value

Can someone help me with optimizing my TypeScript code for a function I have? function test(obj?: { someProperty: string}) { return obj && obj.someProperty; } Although WebStorm indicates that the return value should be a boolean, the TypeScript compil ...

Troubleshooting a Django TypeError while parsing JSON: A step-by-step guide

After running the code below, I am encountering a TypeError in the browser. The error specifically occurs at the final line with the message 'NoneType' object is not subscriptable (I am attempting to retrieve all the URLs for each item). What&apo ...

Ways to modify data within a nested dictionary?

There are 2 dictionaries available: data = { "filter": { "and": [ { "or": [ { "and": [ ...

When utilizing JSON data in web services, I am presented with a variety of information. However, I am only interested in extracting the ID and

When I retrieve data using JSON in web services, the output includes various attributes. What I am interested in extracting are only the 'id' and 'agenda_temp' data. { "0": "1", "1": "Travel Plan", "id": "1", "agenda_temp": "Tr ...

Issue: Unable to 'locate' or 'access' ./lib/React folder while utilizing webpack

I've been delving into the world of React for a while now and decided to experiment with integrating it with webpack. Below is my webpack.config.js : var path = require('path'); module.exports = { entry: './app.js', outp ...

Unexpected expression after upgrading to TypeScript 3.7.2 was encountered, file expected.ts(1109)

After updating TypeScript from version 3.6.x to 3.7.2, I started using optional chaining in my code. However, I encountered a peculiar error. Error message: Expression expected.ts(1109) This error appeared in both my (vim, VSCode) IDE, even though the ...

Refresh a div element automatically with information from a different webpage using jQuery

I've been attempting to automatically reload a page and fetch new data every 10 seconds, or even less. However, the codes I've tried so far have not been successful. Here is my current approach... // script // <script> $(document).rea ...

Kendo UI Web - MultiSelect: choosing an option multiple times

Currently, I am encountering an issue with the Kendo UI MultiSelect widget when trying to select an option multiple times. An example of this is shown in the image below where I want to choose Schindler's List again after selecting The Dark Knight. Ho ...

Transform boolean values to 1/0 instead of true/false in Jackson Serializing

I am working with a REST resource where I receive a JSON object that represents a map from user ID to a boolean value indicating if the user encountered errors. Due to the large number of users I expect to handle, I am looking to reduce the size of this J ...

Exploring the transformation of asynchronous callbacks to promises in Node.js

As a novice, I am currently in the process of developing a User Management system using NodeJS. Previously, I had implemented it with MongoDB and Express, but now I am rebuilding it with Express, Sequelize, and Postgresql to enhance my understanding of cer ...

Displaying Keystonejs list items on every page

Is there a more effective method to efficiently load the content of a Keystone's list on every page, rather than calling it individually in each view? Could this be achieved through middleware.js? The objective is to create a dropdown for the navigat ...