Incorporate a hyphen to every offspring within a multi-tiered category hierarchy using JavaScript

Question

Incorporate a hyphen to every offspring within a multi-tiered category hierarchy using JavaScript

I have an array structure that represents categories with multiple levels:

[
        {
            "id": 5,
            "parent_id": 3,
            "name": "Fruits",
            "parent": {
                "id": 3,
                "parent_id": 1,
                "name": "Vegetables and fruits",
            }
        },
        {
            "id": 6,
            "parent_id": 3,
            "name": "Vegetables",
            "parent": {
                "id": 3,
                "parent_id": 1,
                "name": "Vegetables and fruits",
            }
        },
        {
            "id": 3,
            "parent_id": null,
            "name": "Vegetables and fruits",
            "parent": null
        },
]

My goal is to prepend a '-' (dash) to each child category based on its level within the hierarchy. For example, first-level categories get one dash '-', while third-level ones get two dashes '--'.

Is there a way to update the array's structure like this?

I've attempted some code snippet below:

const updateData = (data) => {
    return data.map(item => {
        if (item.parent_id != null) {
            // Recursive logic might be needed here
            item.name = `-${item.name }`;
        }
        return item;
    })
}

Expected output after modification:

Vegetables and fruits
Drinks
-Fruits
-Vegetables
--Tomatoes
--Potatoes

javascript arrays ecmascript-6 ecmascript-5

Answer 1

Answer №1

One approach is to define a function called getLevel, which can determine the level of any given node. This information can then be used to determine how many dashes should be included in the output:

let nodes = [ { "id": 5, "parent_id": 3, "name": "Fruits", "parent": { "id": 3, "parent_id": 1, "name": "Vegetables and fruits", } }, { "id": 6, "parent_id": 3, "name": "Vegetables", "parent": { "id": 3, "parent_id": 1, "name": "Vegetables and fruits", } }, { "id": 3, "parent_id": null, "name": "Vegetables and fruits", "parent": null }, { "id": 7, "parent_id": 5, "name": "Strawberries", "parent": { "id": 5, "parent_id": 3, "name": "Vegetables and fruits", } }, { "id": 8, "parent_id": 6, "name": "Tomatos", "parent": { "id": 6, "parent_id": 3, "name": "Vegetables and fruits", } }, ]

// Pre-compute object / parent mapping
const parentMap = nodes.reduce((acc,obj) => { 
    acc[obj.id] = obj?.parent;
    return acc;
}, {})

// Determine the node's level based on its parent id.
function getLevel(parentMap, obj) {
     let level = 0;
     while (parentMap[obj.id]) {
         level++;
         obj = parentMap[obj.id] 
     }
     return level;
}

const finalResult = nodes.map(obj => {
    level = getLevel(parentMap , obj);
    return { ...obj, level} ;
})
.sort((a,b) => a.level - b.level)
.map(obj => '-'.repeat(obj.level) + obj.name)

console.log('Final Output:', finalResult)

Answer 2

One approach is to define a function called getLevel, which can determine the level of any given node. This information can then be used to determine how many dashes should be included in the output:

let nodes = [ { "id": 5, "parent_id": 3, "name": "Fruits", "parent": { "id": 3, "parent_id": 1, "name": "Vegetables and fruits", } }, { "id": 6, "parent_id": 3, "name": "Vegetables", "parent": { "id": 3, "parent_id": 1, "name": "Vegetables and fruits", } }, { "id": 3, "parent_id": null, "name": "Vegetables and fruits", "parent": null }, { "id": 7, "parent_id": 5, "name": "Strawberries", "parent": { "id": 5, "parent_id": 3, "name": "Vegetables and fruits", } }, { "id": 8, "parent_id": 6, "name": "Tomatos", "parent": { "id": 6, "parent_id": 3, "name": "Vegetables and fruits", } }, ]

// Pre-compute object / parent mapping
const parentMap = nodes.reduce((acc,obj) => { 
    acc[obj.id] = obj?.parent;
    return acc;
}, {})

// Determine the node's level based on its parent id.
function getLevel(parentMap, obj) {
     let level = 0;
     while (parentMap[obj.id]) {
         level++;
         obj = parentMap[obj.id] 
     }
     return level;
}

const finalResult = nodes.map(obj => {
    level = getLevel(parentMap , obj);
    return { ...obj, level} ;
})
.sort((a,b) => a.level - b.level)
.map(obj => '-'.repeat(obj.level) + obj.name)

console.log('Final Output:', finalResult)

Answer 3

Answer №2

To simplify the process, consider converting your input into a list of trees to handle separate roots efficiently. This transformation allows for easy recursive traversal and printing. Below is an example implementation:

const input = [
        {
            "id": 5,
            "parent_id": 3,
            "name": "Fruits",
            "parent": {
                "id": 3,
                "parent_id": 1,
                "name": "Vegetables and fruits",
            }
        },
        {
            "id": 6,
            "parent_id": 3,
            "name": "Vegetables",
            "parent": {
                "id": 3,
                "parent_id": 1,
                "name": "Vegetables and fruits",
            }
        },
        {
            "id": 3,
            "parent_id": null,
            "name": "Vegetables and fruits",
            "parent": null
        },
]


function buildTrees(input) {
  const mapping = new Map()

    // Create a map based on item id
  input.forEach(i => {
    delete i.parent // exclude parent details
    i.children = []
    mapping.set(i.id, i)
  })

    // Add each node to its parent's children list
  input.filter(i => i.parent_id !== null).forEach(i => {
    mapping.get(i.parent_id).children.push(i)
  })

    // Return the root nodes
  return input.filter(i => i.parent_id === null).map(i => mapping.get(i.id))
}

function printTree(tree, depth) {
    // Recursive function to print tree names
    console.log('-'.repeat(depth) + ' ' + tree.name)
  tree.children.forEach(child => printTree(child, depth + 1))
}

const trees = buildTrees(input)

trees.forEach(tree => printTree(tree, 0))

Answer 4

To simplify the process, consider converting your input into a list of trees to handle separate roots efficiently. This transformation allows for easy recursive traversal and printing. Below is an example implementation:

const input = [
        {
            "id": 5,
            "parent_id": 3,
            "name": "Fruits",
            "parent": {
                "id": 3,
                "parent_id": 1,
                "name": "Vegetables and fruits",
            }
        },
        {
            "id": 6,
            "parent_id": 3,
            "name": "Vegetables",
            "parent": {
                "id": 3,
                "parent_id": 1,
                "name": "Vegetables and fruits",
            }
        },
        {
            "id": 3,
            "parent_id": null,
            "name": "Vegetables and fruits",
            "parent": null
        },
]


function buildTrees(input) {
  const mapping = new Map()

    // Create a map based on item id
  input.forEach(i => {
    delete i.parent // exclude parent details
    i.children = []
    mapping.set(i.id, i)
  })

    // Add each node to its parent's children list
  input.filter(i => i.parent_id !== null).forEach(i => {
    mapping.get(i.parent_id).children.push(i)
  })

    // Return the root nodes
  return input.filter(i => i.parent_id === null).map(i => mapping.get(i.id))
}

function printTree(tree, depth) {
    // Recursive function to print tree names
    console.log('-'.repeat(depth) + ' ' + tree.name)
  tree.children.forEach(child => printTree(child, depth + 1))
}

const trees = buildTrees(input)

trees.forEach(tree => printTree(tree, 0))

Incorporate a hyphen to every offspring within a multi-tiered category hierarchy using JavaScript

Answer №1

Answer №2

Similar questions

What is the best way to assign IDs dynamically within an onclick function in Django?

Having trouble with understanding the usage of "this" in nodejs/js when using it after a callback function within setTimeout

Using a PHP foreach loop to filter an array based on array keys

Create a CSV file through an MVC Web API HttpResponse and retrieve it using AngularJS for downloading

When setting a background-image with jQuery, the background will only change once

Guide to extracting the outcomes of a promise array and populating them into a new array using Protractor

Enhance cart items in a shopping cart using Redux

No pathways can be established within Core UI Angular

How can I pull the account creation date stored in MongoDB and display it using Handlebars?

Retrieving and submitting text in a NodeJS environment

Unable to invoke JS function in Drupal 5 file

Retrieving object key value from an array using Underscore.js

How to identify and assign labels to elements in a numpy group

NodeJS JSONStream causing memory exhaustion issue

several parameters for the `ts-node -r` options

Toggle a v-if variable within the created() lifecycle hook in the VUE 3 framework

The module 'react/lib/React' could not be located within the file 'ReactTestUtils.js'

Creating a JavaScript popup script from scratch

Before the file upload process is finished, the progress of tracking Angular files reaches 100%

Retrieving Information using Ajax in Laravel with Form Inputs