Convert data into a tree view in JavaScript, with two levels of nesting and the lowest level represented as an array

Question

Convert data into a tree view in JavaScript, with two levels of nesting and the lowest level represented as an array

Here is an example of a JSON object:

[
  {
    "venueId": "10001",
    "items": [
      {
        "venueId": "10001",
        "locationId": "14",
        "itemCode": "1604",
        "itemDescription": "Chef Instruction",
        "categoryCode": "28",
        "categoryDescription": "Food Instructions",
        "qty": 0,
        "saleValue": 0,
        "saleDatetime": "0001-01-01T00:00:00",
        "timeToLive": 0
      },
      ... (more item details)
    ]
  }
]

I am looking to rearrange this data into a new JSON object where it is grouped by id and then by category code. The desired format is like the following structure:

{
    '1': { 
        '555': [{ itemCode: '456'}, { itemCode: '457'}, { itemCode: '458'}]
    }
}

Is there a straightforward method to achieve this using lodash, plain JavaScript, or any available NPM package? This task is similar to another query found here: JavaScript group data into tree view 2 levels deep but with the distinction that the third level involves an array of objects.

javascript typescript sorting

Answer 1

Answer №1

To group the data, you can utilize two nested loops to create new objects or arrays as needed.

var data = [{ venueId: "10001", items: [{ venueId: "10001", locationId: "14", itemCode: "1604", itemDescription: "Chef Instruction", categoryCode: "28", categoryDescription: "Food Instructions", qty: 0, saleValue: 0, saleDatetime: "0001-01-01T00:00:00", timeToLive: 0 }, { venueId: "10001", locationId: "14", itemCode: "1381", itemDescription: "Meat Lovers Pizza", categoryCode: "48", categoryDescription: "25Fore - Pizza", qty: 0, saleValue: 0, saleDatetime: "0001-01-01T00:00:00", timeToLive: 0 }, { venueId: "10001", locationId: "14", itemCode: ...

console.log(result);

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

Answer 2

To group the data, you can utilize two nested loops to create new objects or arrays as needed.

var data = [{ venueId: "10001", items: [{ venueId: "10001", locationId: "14", itemCode: "1604", itemDescription: "Chef Instruction", categoryCode: "28", categoryDescription: "Food Instructions", qty: 0, saleValue: 0, saleDatetime: "0001-01-01T00:00:00", timeToLive: 0 }, { venueId: "10001", locationId: "14", itemCode: "1381", itemDescription: "Meat Lovers Pizza", categoryCode: "48", categoryDescription: "25Fore - Pizza", qty: 0, saleValue: 0, saleDatetime: "0001-01-01T00:00:00", timeToLive: 0 }, { venueId: "10001", locationId: "14", itemCode: ...

console.log(result);

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

Answer 3

Answer №2

In my opinion, the most efficient approach would involve utilizing a simple double loop method. First, iterate over each row and then within that, iterate over the individual items. By doing this, you can easily populate the final object with the desired structure:

var initialArray = [
    {
        id: '1', 
        items: [
            {
                id: '1',
                saleId: '123',
                saleIdAndItemId: '123456',
                locationId: '123',
                itemCode: '456',
                itemDescription: 'my item',
                categoryCode: '555',
                categoryDescription: 'my category',
                qty: 10,
                saleValue: 200
            },
            {
                id: '1',
                saleId: '123',
                saleIdAndItemId: '123456',
                locationId: '123',
                itemCode: '457',
                itemDescription: 'my item',
                categoryCode: '555',
                categoryDescription: 'my category',
                qty: 10,
                saleValue: 200
            },
            {
                id: '1',
                saleId: '123',
                saleIdAndItemId: '123456',
                locationId: '123',
                itemCode: '458',
                itemDescription: 'my item',
                categoryCode: '555',
                categoryDescription: 'my category',
                qty: 10,
                saleValue: 200
            }
        ]
    },
    {
        id: '2', 
        items: [
            {
                id: '2',
                saleId: '123',
                saleIdAndItemId: '123456',
                locationId: '123',
                itemCode: '456',
                itemDescription: 'my item',
                categoryCode: '556',
                categoryDescription: 'my category 6',
                qty: 10,
                saleValue: 200
            }
        ]
    },
    {
        id: '3', 
        items: [
            {
                venueId: '3',
                saleId: '123',
                saleIdAndItemId: '123456',
                locationId: '123',
                itemCode: '457',
                itemDescription: 'my item',
                categoryCode: '557',
                categoryDescription: 'my category 7',
                qty: 10,
                saleValue: 200
            }
        ]
    }
];

var finalObject = {},
    currentRow = {},
    currentItem = {},
    newItemObject = {};

for (var i in initialArray) {
    currentRow = initialArray[i];
    newItemObject = {};
    for (var j in currentRow.items) {
        currentItem = currentRow.items[j];
        // Check if the category code already exists in the newItemObject
        if (!newItemObject.hasOwnProperty(currentItem.categoryCode)) {
            newItemObject[currentItem.categoryCode] = [];
        }
        // You can choose to push the entire currentItem or just specific data
        // newItemObject[currentItem.categoryCode].push(currentItem);
        newItemObject[currentItem.categoryCode].push({
            'itemCode': currentItem.itemCode
        });
    }
    
    finalObject[currentRow.id] = newItemObject;
}

console.log(finalObject);

Answer 4

In my opinion, the most efficient approach would involve utilizing a simple double loop method. First, iterate over each row and then within that, iterate over the individual items. By doing this, you can easily populate the final object with the desired structure:

var initialArray = [
    {
        id: '1', 
        items: [
            {
                id: '1',
                saleId: '123',
                saleIdAndItemId: '123456',
                locationId: '123',
                itemCode: '456',
                itemDescription: 'my item',
                categoryCode: '555',
                categoryDescription: 'my category',
                qty: 10,
                saleValue: 200
            },
            {
                id: '1',
                saleId: '123',
                saleIdAndItemId: '123456',
                locationId: '123',
                itemCode: '457',
                itemDescription: 'my item',
                categoryCode: '555',
                categoryDescription: 'my category',
                qty: 10,
                saleValue: 200
            },
            {
                id: '1',
                saleId: '123',
                saleIdAndItemId: '123456',
                locationId: '123',
                itemCode: '458',
                itemDescription: 'my item',
                categoryCode: '555',
                categoryDescription: 'my category',
                qty: 10,
                saleValue: 200
            }
        ]
    },
    {
        id: '2', 
        items: [
            {
                id: '2',
                saleId: '123',
                saleIdAndItemId: '123456',
                locationId: '123',
                itemCode: '456',
                itemDescription: 'my item',
                categoryCode: '556',
                categoryDescription: 'my category 6',
                qty: 10,
                saleValue: 200
            }
        ]
    },
    {
        id: '3', 
        items: [
            {
                venueId: '3',
                saleId: '123',
                saleIdAndItemId: '123456',
                locationId: '123',
                itemCode: '457',
                itemDescription: 'my item',
                categoryCode: '557',
                categoryDescription: 'my category 7',
                qty: 10,
                saleValue: 200
            }
        ]
    }
];

var finalObject = {},
    currentRow = {},
    currentItem = {},
    newItemObject = {};

for (var i in initialArray) {
    currentRow = initialArray[i];
    newItemObject = {};
    for (var j in currentRow.items) {
        currentItem = currentRow.items[j];
        // Check if the category code already exists in the newItemObject
        if (!newItemObject.hasOwnProperty(currentItem.categoryCode)) {
            newItemObject[currentItem.categoryCode] = [];
        }
        // You can choose to push the entire currentItem or just specific data
        // newItemObject[currentItem.categoryCode].push(currentItem);
        newItemObject[currentItem.categoryCode].push({
            'itemCode': currentItem.itemCode
        });
    }
    
    finalObject[currentRow.id] = newItemObject;
}

console.log(finalObject);

Answer 5

Answer №3

Upon reviewing your linked question, it appears that you are seeking additional properties beyond those listed in the provided example. Below is a function designed to convert your data into the specified format, with the flexibility to specify which nested keys should be included in the output:

const transformData = (array, keysToInclude) => {
  const result = {};
  for (const group of array) {
    const id = {};
    result[group.venueId] = id;
    for (const item of group.items) {
      let category = id[item.categoryCode];
      if (!category) {
        category = [];
        id[item.categoryCode] = category;
      }
      if (!keysToInclude) {
        category.push(item);
        continue;
      }
      const itemData = {};
      for (const key of keysToInclude) {
        if (Object.keys(item).includes(key)) itemData[key] = item[key];
      }
      category.push(itemData);
    }
  }
  return result;
};

const data=[{venueId:"10001",items:[{venueId:"10001",locationId:"14",itemCode:"1604",itemDescription:"Chef Instruction",categoryCode:"28",categoryDescription:"Food Instructions",qty:0,saleValue:0,saleDatetime:"0001-01-01T00:00:00",timeToLive:0},{venueId:"10001",locationId:"14",itemCode:"1381",itemDescription:"Meat Lovers Pizza",categoryCode:...

const onlyItemCodes = transformData(data, ['itemCode']);
const allKeys = transformData(data);

const log = data => console.log(JSON.stringify(data, null, 2));

log(onlyItemCodes);
log(allKeys);

Answer 6

Upon reviewing your linked question, it appears that you are seeking additional properties beyond those listed in the provided example. Below is a function designed to convert your data into the specified format, with the flexibility to specify which nested keys should be included in the output:

const transformData = (array, keysToInclude) => {
  const result = {};
  for (const group of array) {
    const id = {};
    result[group.venueId] = id;
    for (const item of group.items) {
      let category = id[item.categoryCode];
      if (!category) {
        category = [];
        id[item.categoryCode] = category;
      }
      if (!keysToInclude) {
        category.push(item);
        continue;
      }
      const itemData = {};
      for (const key of keysToInclude) {
        if (Object.keys(item).includes(key)) itemData[key] = item[key];
      }
      category.push(itemData);
    }
  }
  return result;
};

const data=[{venueId:"10001",items:[{venueId:"10001",locationId:"14",itemCode:"1604",itemDescription:"Chef Instruction",categoryCode:"28",categoryDescription:"Food Instructions",qty:0,saleValue:0,saleDatetime:"0001-01-01T00:00:00",timeToLive:0},{venueId:"10001",locationId:"14",itemCode:"1381",itemDescription:"Meat Lovers Pizza",categoryCode:...

const onlyItemCodes = transformData(data, ['itemCode']);
const allKeys = transformData(data);

const log = data => console.log(JSON.stringify(data, null, 2));

log(onlyItemCodes);
log(allKeys);

Convert data into a tree view in JavaScript, with two levels of nesting and the lowest level represented as an array

Answer №1

Answer №2

Answer №3

Similar questions

The performance of the Ionic app is significantly hindered by lagging issues both on Google

position text to the right side of a slider gallery created with JavaScript

Using the MongoDB aggregate framework to determine the total employee count per unique state

Unveiling the secrets of the Google Region Lookup API

Converting string patterns to regular expressions

Accessing and fetching data from a PostgreSQL database using JavaScript through an API

Locate and embed within a sophisticated JSON structure

Does the webworker function as a multi-thread?

Substitute the website address using regular expressions

Ways to reveal concealed div elements when hovering the mouse?

Out of nowhere, JavaScript/jQuery ceased to function

Nodejs - Utilizing Express and Mongoose to Implement URL Routing by Name

Guide on Retrieving the Current URL in NodeJS

The Javascript function is malfunctioning, unable to assign the 'onclick' property to null

"Unable to move past the initial segment due to an ongoing

When the page initially loads, the block appears on top of the upper block and remains in place after the page is refreshed

What causes the disparity in functionality between simple html and css in an Angular 2 project compared to a vanilla html website?

Trouble arises when trying to combine NextJs 12.2.5 with next-auth 4.17 due to a dependency

Calling Ajax in JavaScript

Parent Directory Injector: Prioritizing Injection of Parent Directories