Generating Tree Structure Object Automatically from Collection using Keys

Question

Generating Tree Structure Object Automatically from Collection using Keys

I am looking to automatically generate a complex Tree structure from a set of objects, with the levels of the tree determined by a list of keys.

For example, my collection could consist of items like

[{a_id: '1', a_name: '1-name', b_id: '2', b_name: '2_name', c_id: '3', c_name: '3_name'}...]

The specified keys for each level of the tree could be something like: ['a', 'b', 'c']

In this setup, the top-level object contains an options property that holds pairs of {key: any, value: any}. Each child object also has the same structure, but within an array named groups, where each group has a group attribute referring to its parent option's value.

The desired output for the Tree object would resemble:

{
  id: 'a',
  options: [{ key: '1-name', value: '1'}...],
  child: {
    id: 'b',
    groups: [
      { group: '1', name: '1-name', options: [{key: '2-name', value: '2'}]}
    ],
    child: {
      id: 'c',
      groups: [
        { group: '2', name: '2-name', options: [{key: '3-name', value: '3'}]}
      ],
    }
  }
}

I am struggling to create a concise function that can construct this recursive structure using the basic collection. I aim for the keys to determine the nested relationships and organize the corresponding objects as recursive children. If there is a better approach to transform the original collection into the target structure, I am open to suggestions.

javascript arrays typescript tree lodash

Answer 1

Answer №1

function organizeData(keys, information, parentGroup, parentName) {
  if (keys.length == 0) return;
  var currentKey = keys.shift(); // Extract first element and remove it from array
  var finalResult = {id: currentKey};
  var groupValue = information[currentKey + "_id"];
  var nameValue = information[currentKey + "_name"];
  var dataOptions = [{key: nameValue, value: groupValue}];
  if (parentGroup) { // Only null for first level
    finalResult.groups = [{
      group: parentGroup,
      name: parentName,
      options: dataOptions
    }];
  } else {
    finalResult.options = dataOptions;
  }
  if (keys.length > 0) { // Check if not the last key in the array
    finalResult.child = organizeData(keys, information, groupValue, nameValue);
  }
  return finalResult;
}

var organizedData = organizeData (
  ['a', 'b', 'c'],
  {a_id: '1', a_name: '1-name', b_id: '2', b_name: '2_name', c_id: '3', c_name: '3_name'}
);

console.log(organizedData);

See a demo at https://codepen.io/bortao/pen/WNvdXpy

Answer 2

function organizeData(keys, information, parentGroup, parentName) {
  if (keys.length == 0) return;
  var currentKey = keys.shift(); // Extract first element and remove it from array
  var finalResult = {id: currentKey};
  var groupValue = information[currentKey + "_id"];
  var nameValue = information[currentKey + "_name"];
  var dataOptions = [{key: nameValue, value: groupValue}];
  if (parentGroup) { // Only null for first level
    finalResult.groups = [{
      group: parentGroup,
      name: parentName,
      options: dataOptions
    }];
  } else {
    finalResult.options = dataOptions;
  }
  if (keys.length > 0) { // Check if not the last key in the array
    finalResult.child = organizeData(keys, information, groupValue, nameValue);
  }
  return finalResult;
}

var organizedData = organizeData (
  ['a', 'b', 'c'],
  {a_id: '1', a_name: '1-name', b_id: '2', b_name: '2_name', c_id: '3', c_name: '3_name'}
);

console.log(organizedData);

See a demo at https://codepen.io/bortao/pen/WNvdXpy

Answer 3

Answer №2

A new class was designed to handle the entire collection and includes a method for exporting data in the specific format requested in the initial query:

import { Option, OptionGroup, SelectTreeFieldOptions } from '@common/ui';
import { isObject } from 'lodash';

// Defining Symbol for Key in Group
const KEY_SYMBOL = Symbol('key');

/**
 * The Tree class creates deeply nested objects based on the specified 'level'
 */
export class Tree {

  private readonly level: string;
  private readonly groups: Record<string, Record<string, any>>;
  private readonly child?: Tree;

  constructor(private readonly levels: string[], private readonly isRoot = true) {
    this.level = levels[0];
    this.groups = isRoot && { root: {} } || {};
    if (levels.length > 1) {
      this.child = new Tree(levels.slice(1), false);
    }
  }

  /**
   * Populates the Tree with the provided Collection of models
   * Each model should have two properties per level: ${level}_id and ${level}_name
   * Entries are matched to the corresponding level's groups and passed down to its children
   * @param data - the data Collection used to populate the Tree
   */
  setData(data: Record<string, any>[]): Tree {
    data.forEach(entry => this.addData(entry, 'root', ''));
    return this;
  }

  export() {
    const key = this.isRoot && 'options' || 'groups';
    const values = this.getOptionsOrGroups();
    return {
      id: `${this.level}s`,
      [key]: values,
      ...(this.child && { child: this.child.toSelectTreeField() } || {}),
    };
  }

  /**
   * Retrieves recursive Options or OptionGroups from each level of the Tree
   * @param nestedObject - optional sub-object found on a child branch of the Tree
   */
  protected getOptionsOrGroups(nestedObject?: Record<string, any>): (Option | OptionGroup)[] {
    const options = (this.isRoot && this.groups.root) || nestedObject || this.groups;
    return Object.entries(options).map(([val, key]) => {
      const value = Number(val) || val;
      if (!isObject(key)) {
        return { key, value };
      }
      return { value, group: key[KEY_SYMBOL], options: this.getOptionsOrGroups(key) };
    }) as (Option | OptionGroup)[];
  }

  /**
   * Attempts to add data from a collection item to the current level of the Tree
   * @param data - the collection item
   * @param parentId - ID of the parent item if this Tree is a child
   * @param parentName - label used for the parent item if this Tree is a child
   */
  protected addData(data: Record<string, any>, parentId: string, parentName: string) {
    const id = data[`${this.level}_id`];
    const name = data[`${this.level}_name`];
    if (!id || !name) {
      throw new Error(`ID or Name not found on level ${this.level}`);
    }
    (this.groups[parentId] || (this.groups[parentId] = { [KEY_SYMBOL]: parentName }))[id] = name;
    if (this.child) {
      this.child.addData(data, id, name);
    }
  }
}

Answer 4

A new class was designed to handle the entire collection and includes a method for exporting data in the specific format requested in the initial query:

import { Option, OptionGroup, SelectTreeFieldOptions } from '@common/ui';
import { isObject } from 'lodash';

// Defining Symbol for Key in Group
const KEY_SYMBOL = Symbol('key');

/**
 * The Tree class creates deeply nested objects based on the specified 'level'
 */
export class Tree {

  private readonly level: string;
  private readonly groups: Record<string, Record<string, any>>;
  private readonly child?: Tree;

  constructor(private readonly levels: string[], private readonly isRoot = true) {
    this.level = levels[0];
    this.groups = isRoot && { root: {} } || {};
    if (levels.length > 1) {
      this.child = new Tree(levels.slice(1), false);
    }
  }

  /**
   * Populates the Tree with the provided Collection of models
   * Each model should have two properties per level: ${level}_id and ${level}_name
   * Entries are matched to the corresponding level's groups and passed down to its children
   * @param data - the data Collection used to populate the Tree
   */
  setData(data: Record<string, any>[]): Tree {
    data.forEach(entry => this.addData(entry, 'root', ''));
    return this;
  }

  export() {
    const key = this.isRoot && 'options' || 'groups';
    const values = this.getOptionsOrGroups();
    return {
      id: `${this.level}s`,
      [key]: values,
      ...(this.child && { child: this.child.toSelectTreeField() } || {}),
    };
  }

  /**
   * Retrieves recursive Options or OptionGroups from each level of the Tree
   * @param nestedObject - optional sub-object found on a child branch of the Tree
   */
  protected getOptionsOrGroups(nestedObject?: Record<string, any>): (Option | OptionGroup)[] {
    const options = (this.isRoot && this.groups.root) || nestedObject || this.groups;
    return Object.entries(options).map(([val, key]) => {
      const value = Number(val) || val;
      if (!isObject(key)) {
        return { key, value };
      }
      return { value, group: key[KEY_SYMBOL], options: this.getOptionsOrGroups(key) };
    }) as (Option | OptionGroup)[];
  }

  /**
   * Attempts to add data from a collection item to the current level of the Tree
   * @param data - the collection item
   * @param parentId - ID of the parent item if this Tree is a child
   * @param parentName - label used for the parent item if this Tree is a child
   */
  protected addData(data: Record<string, any>, parentId: string, parentName: string) {
    const id = data[`${this.level}_id`];
    const name = data[`${this.level}_name`];
    if (!id || !name) {
      throw new Error(`ID or Name not found on level ${this.level}`);
    }
    (this.groups[parentId] || (this.groups[parentId] = { [KEY_SYMBOL]: parentName }))[id] = name;
    if (this.child) {
      this.child.addData(data, id, name);
    }
  }
}

Generating Tree Structure Object Automatically from Collection using Keys

Answer №1

Answer №2

Similar questions

Using dot notation for event handlers in Vue.Js is a handy technique

The default action is not triggered when the click event occurs

Ensure that a synchronous action is performed prior to each Backbone HTTP request

Error 500 on Firebase: Issue solving "firebase" in "firebase.js" not resolved

Encountering an "undefined is not a function" error across all libraries

What is the method for executing a specific task using grunt.registerTask()?

PHP Filter Function to Retrieve Items Based on Multiple Key Values with OR Logic

Redirecting from HTTP to HTTPS with node.js/Express

Is it possible for me to avoid html tags inside a class without using the xmp tag?

Encountering a syntax error with the spread operator while attempting to deploy on Heroku

Please reset the form fields after the most recent edit

On paste events, CKEditor will strip away all HTML tags except for div and span elements

When using angular $resource.save for savings, the view is forced to redraw and reflow because of the collection watcher

Adjust the size of every card in a row when one card is resized

The JSON response did not contain the expected property in Javascript

How to successfully close a jQuery dialog within a user control

What is the most efficient way to utilize a single connection to interact with MongoDB?

What is the best way to implement bypassSecurityTrustResourceUrl for all elements within an array?

Error encountered with the Schema in expressjs and mongoose frameworks

Tips for relocating a CSS button