Nested categorization in linq javascript

Question

Nested categorization in linq javascript

I have a JSON format that contains information about different people within various departments and sub-departments.

var personArray = 
[
    {name:"person1",code:"101011",mainDept:"mainD 1",dept:"dept1",SubDept:"Sub01"},
    {name:"person2",code:"201012",mainDept:"mainD 1",dept:"dept1",SubDept:"Sub11"},
    ...
    {name:"person29",code:"291119",mainDept:"mainD 5",dept:"dept161",SubDept:"Sub003"}];

I want to structure this data for use in jsTree, with multi-level grouping based on main department, department, sub-department, and individual persons.

Although I have managed to group the data by one level (mainDept), I am struggling to figure out how to achieve multi-level grouping as required.

var linq = Enumerable.From(personArray);
var grp = linq.GroupBy("$.mainDept","{text:$.dept}","{name:$,children:$$.ToArray()}").ToArray()

javascript group-by jstree linq.js

Answer 1

Answer №1

If you find yourself in a situation where you need to handle deeply nested groupings with different operations at each level, using recursion can simplify the process. Thankfully, Linq.js offers a Let() function that can help achieve this. By creating specialized functions, you can tackle this task effectively.

function customGrouper(propertyName, selector) {
  return function (element) {
    return element.GroupBy("$." + propertyName, null, function (key, group) {
      return {
        text: key,
        children: group.Let(selector).ToArray()
      };
    });
  };
}
var items = Enumerable.From(personArray)
  .Let(customGrouper('mainDept', function (group1) {
    return group1.Let(customGrouper('dept', function (group2) {
      return group2.Let(customGrouper('SubDept', function (group3) {
        return group3.Select("$.name").ToArray();
      }));
    }));
  }))
  .ToArray();

Check out the example on jsfiddle

Alternatively, you can leverage jstree's method for establishing parent/child relationships without deep nesting. Instead, generate a flat list of config nodes.

var items = Enumerable.From(personArray)
  .Let(function (elements) {
    var roots = { '#': {}, mainDept: {}, dept: {}, SubDept: {} };
    elements.ForEach(function (person) {
      roots['#'][person.mainDept] = '#';
      roots['mainDept'][person.dept] = person.mainDept;
      roots['dept'][person.SubDept] = person.dept;
      roots['SubDept'][person.name] = person.SubDept;
    });
    function createNode(root) {
      return Enumerable.From(roots[root]).Select("{ parent: $.Value, id: $.Key, text: $.Key }");
    }
    return createNode('#').Concat(createNode('mainDept')).Concat(createNode('dept')).Concat(createNode('SubDept'));
  })
  .ToArray();

Explore the solution on jsfiddle

Answer 2

If you find yourself in a situation where you need to handle deeply nested groupings with different operations at each level, using recursion can simplify the process. Thankfully, Linq.js offers a Let() function that can help achieve this. By creating specialized functions, you can tackle this task effectively.

function customGrouper(propertyName, selector) {
  return function (element) {
    return element.GroupBy("$." + propertyName, null, function (key, group) {
      return {
        text: key,
        children: group.Let(selector).ToArray()
      };
    });
  };
}
var items = Enumerable.From(personArray)
  .Let(customGrouper('mainDept', function (group1) {
    return group1.Let(customGrouper('dept', function (group2) {
      return group2.Let(customGrouper('SubDept', function (group3) {
        return group3.Select("$.name").ToArray();
      }));
    }));
  }))
  .ToArray();

Check out the example on jsfiddle

Alternatively, you can leverage jstree's method for establishing parent/child relationships without deep nesting. Instead, generate a flat list of config nodes.

var items = Enumerable.From(personArray)
  .Let(function (elements) {
    var roots = { '#': {}, mainDept: {}, dept: {}, SubDept: {} };
    elements.ForEach(function (person) {
      roots['#'][person.mainDept] = '#';
      roots['mainDept'][person.dept] = person.mainDept;
      roots['dept'][person.SubDept] = person.dept;
      roots['SubDept'][person.name] = person.SubDept;
    });
    function createNode(root) {
      return Enumerable.From(roots[root]).Select("{ parent: $.Value, id: $.Key, text: $.Key }");
    }
    return createNode('#').Concat(createNode('mainDept')).Concat(createNode('dept')).Concat(createNode('SubDept'));
  })
  .ToArray();

Explore the solution on jsfiddle

Answer 3

Answer №2

To begin, you must first convert your personArray into a format that is compatible with jsTree and then use it to initialize jsTree. While I may not be able to assist with linq, I can provide guidance on accomplishing this in vanilla JavaScript, as demonstrated in this example - Fiddle.

Answer 4

To begin, you must first convert your personArray into a format that is compatible with jsTree and then use it to initialize jsTree. While I may not be able to assist with linq, I can provide guidance on accomplishing this in vanilla JavaScript, as demonstrated in this example - Fiddle.

Nested categorization in linq javascript

Answer №1

Answer №2

Similar questions

Creating a local storage file named .notification.localstore.json specific to Microsoft ConversationBot

Issue with child routes not functioning properly within single spa React application

Exploring the contrast between using '-save' and '--save' when executing the 'npm install' command

The $http service factory in Angular is causing a duplication of calls

Storing a collection of strings in a MongoDB database: A step-by-step guide

Stopping the animation of scrollLeft upon user interaction can be achieved by utilizing JavaScript

Is it possible to retrieve any user data by id using Vue 3 Firebase Auth?

The value chosen by the user is not retained by the Select function

Activate the selected image on click and deactivate all other images

Different ways to eliminate unnecessary items in an array

Which is more efficient for rendering performance: using images, CSS gradients, or box shadows with borders?

Error: Unable to access the 'sid' property because it is undefined

Promise.allSettled() - Improving resilience through retry mechanisms for concurrent asynchronous requests

Exploring the Bookmarking Capabilities of Firefox

What steps can I take to repair a JavaScript real-time clock that is not visible on the webpage?

Encountering an error when accessing dynamically routed pages in Next JS

Paypal Payment Plans on a Monthly Basis Utilizing the Bootstrap Pricing Slider

Working with Firebase cloud functions: Updating nodes

Having trouble with babel-loader, encountering an issue with UglifyJS (ES6) causing errors

Invoking a JavaScript function using C# code-behind