js-helper-functions

Javascript Utility Functions

TypeScript utility functions.

• countItemsInMultidimensionalObject
• formatAsKey
• removeItemFromMultidimensionalObject

countItemsInMultidimensionalObject

A function that recursively counts the number of selected items in a nested data structure. This function is particularly useful when dealing with hierarchical selection states such as those found in tree views, nested checklists, or multi-level category pickers.

✨ Features

• Handles both arrays and deeply nested objects.
• Returns a detailed breakdown of item counts per level.
• Provides a total count of all selected items.

Data Type

type NestedObject = {
  [key: string]: Node | string[];
};

Parameeter

Name	Type	Description
data	NestedObject Or string[]	A nested object or array representing selected items.

📤 Returns

• If the input is a flat array, it returns a number representing the count of items.
• If the input is a nested object, it returns an object of type SelectionCountsResult:

{
  total: number;     // Total count of items in the entire structure
  result: {
    [key: string]: number | { ...nested_object }
  }
}

Example

const selection = {
  fruits: ["apple", "banana"],
  vegetables: {
    root: ["carrot", "beet"],
    leafy: ["spinach"],
  },
  grains: {
    rice: ["basmati"],
    wheat: [],
  },
};

const result = countItemsInMultidimensionalObject(selection);
console.log(result);

result:

{
  total: 6,
  result: {
    fruits: 2,
    vegetables: {
      root: 2,
      leafy: 1
    },
    grains: {
      rice: 1,
      wheat: 0
    }
  }
}

> formatAsKey

A lightweight utility function that transforms a given string into a valid key name or key by normalizing spaces, removing special characters, and converting to lowercase.

✨ Features

• Converts strings into kebab-case.
• Removes special characters.
• Trims unnecessary dashes from the beginning and end.

🏗️ Parameters

Name	Type	Description
query	string	The string to be formatted.

📤 Returns

Type	Description
string	A kebab-cased, sanitized string suitable for use as a CSS class name or identifier.

📘 Example

formatAsKey("Primary Button"); // "primary-button"
formatAsKey("Save&Continue!"); // "save-continue"
formatAsKey("  Complex--Key!!   "); // "complex-key"
formatAsKey("Already-formatted_key"); // "already-formatted-key"

🔧 Use Cases

• Normalizing user input for CSS class names.
• Generating HTML id attributes from arbitrary labels.
• Creating keys from titles or headings in CMS or UI systems.

🛠 Notes

• Consecutive special characters or whitespace are collapsed into a single dash.
• Leading and trailing dashes are removed for cleanliness.

removeItemFromMultidimensionalObject

A recursive utility function that removes a specific item from a deeply nested object structure where values can be arrays or further nested objects.

✨ Features

• Traverses and modifies deeply nested objects.
• Removes items from nested arrays based on a given path.
• Cleans up empty branches by removing keys that become empty after item removal.

Data Type

type NestedObject = {
  [key: string]: Node | string[];
};

🏗️ Parameters

Name	Type	Description
obj	NestedObject	The nested object from which to remove the item.
path	string[]	An array representing the path to the array in the structure.
itemToRemove	string	The item to be removed from the array at the given path.

📤 Returns

Type	Description
NestedObject	A new object with the specified item removed.

• If the array becomes empty after removal, its key is deleted from the object.
• If any parent objects become empty due to cascading deletions, those are also removed.

📘 Example

const nested = {
  category1: {
    subcategory1: ["item1", "item2"],
    subcategory2: ["item3"],
  },
  category2: {
    subcategory3: ["item4"],
  },
};

const result = removeItemFromMultidimensionalObject(
  nested,
  ["category1", "subcategory1"],
  "item2"
);
console.log(result);

output:

{
  category1: {
    subcategory1: ['item1'],
    subcategory2: ['item3']
  },
  category2: {
    subcategory3: ['item4']
  }
}

🔄 Use Cases

• Tree-view item deselection
• Tag or category removal in nested data structures
• Form data cleanup