Sorting and saving and identifying the parent-child connections among elements within an array

Question

Sorting and saving and identifying the parent-child connections among elements within an array

I am currently developing an Angular application and here is the structure of my data:

data= [
    {
        "id": 2,
        "name": "Jamie",
        "objectId": 200,
        "parentId": null,
        "children": [
            {
                "id": 98,
                "name": "Rose",
                "objectId": 100,
                "parentId": 200,
                "children": [
                    {
                        "id": 1212,
                        "name": "Julie",
                        "objectId": 500,
                        "parentId": 100,
                        "children": []
                    }
                ]
            },
            {
                "id": 67,
                "name": "Kosy",
                "objectId": 700,
                "parentId": 200,
                "children": []
            }
        ]
    }
]

In my method, I will be receiving an input ID and name. For example, if the ID is 1212 and the name is "Julie", I need to traverse to the node where the ID is 1212 and the name is "Julie". Once this condition is met, I have to check whether the parent ID in children matches the object ID in the parent until the parent ID becomes null.

If the parent ID becomes null, it is considered as the last node, and the desired output should be an array in the following format. For ID 1212 and the name "Julie", the resultArray would be

resultArray = ["Jamie/Rose/Julie"]

, with data separated by slashes from parent to children.

Another example would be if I receive the ID as 67 and the name as "Kosy", then the result array would be

resultArray = ["Jamie/Kosy"]

Since the parent ID of Kosy is 200 and the object ID of Jamie is also 200, it indicates that Jamie is the parent of Kosy, resulting in the formatted data as mentioned above. I aim to create a dynamic code to handle large amounts of data at runtime while maintaining the same structure and logic.

How can I achieve this?

javascript angular typescript

Answer 1

Answer №1

This problem was tackled by me with the code provided below. The challenge presented here is a classic tree-search scenario where special attention is required when checking parent nodes, which was easily addressed in this solution.

const data = [
    {
        "id": 2,
        "name": "Jamie",
        "objectId": 200,
        "parentId": null,
        "children": [
            {
                "id": 98,
                "name": "Rose",
                "objectId": 100,
                "parentId": 200,
                "children": [
                    {
                        "id": 1212,
                        "name": "julie",
                        "objectId": 500,
                        "parentId": 100,
                        "children": []
                    }
                 ]
             },
             {
                 "id": 67,
                 "name": "Kosy",
                 "objectId": 700,
                 "parentId": 200,
                 "children": []
              }
          ]
      }
];

// Function to search for the target within a node (not an array)
// To return true, must pass id comparison from the final node to this node as well
const findInNode = (node, id, name, output) => {
    if (node.name === name && node.id === id) {
        return true;
    } else {
        const children = node.children;
        if (!children) return false;
        // Find in children
        for (let child of children) {
            output.paths.push(child.name);
            if (findInNode(child, id, name, output)) {
                return child.parentId === node.objectId;
            }
            output.paths.pop();
        }
    }
}

// Function to search for the target in an array, used at the top-most level
const findInArray = (nodes, id, name, output) => {
    for (let node of nodes) {
        output.paths.push(node.name);
        if (findInNode(node, id, name, output)) {
            if (!node.parentId) {
                output.found = true;
                break;
            }
        }
        output.paths.pop();
    }
}

output = { paths: [], found: false };
findInArray(data, 1212, 'julie', output);

console.log(output.found);
console.log(output.paths.join('/'));

Answer 2

This problem was tackled by me with the code provided below. The challenge presented here is a classic tree-search scenario where special attention is required when checking parent nodes, which was easily addressed in this solution.

const data = [
    {
        "id": 2,
        "name": "Jamie",
        "objectId": 200,
        "parentId": null,
        "children": [
            {
                "id": 98,
                "name": "Rose",
                "objectId": 100,
                "parentId": 200,
                "children": [
                    {
                        "id": 1212,
                        "name": "julie",
                        "objectId": 500,
                        "parentId": 100,
                        "children": []
                    }
                 ]
             },
             {
                 "id": 67,
                 "name": "Kosy",
                 "objectId": 700,
                 "parentId": 200,
                 "children": []
              }
          ]
      }
];

// Function to search for the target within a node (not an array)
// To return true, must pass id comparison from the final node to this node as well
const findInNode = (node, id, name, output) => {
    if (node.name === name && node.id === id) {
        return true;
    } else {
        const children = node.children;
        if (!children) return false;
        // Find in children
        for (let child of children) {
            output.paths.push(child.name);
            if (findInNode(child, id, name, output)) {
                return child.parentId === node.objectId;
            }
            output.paths.pop();
        }
    }
}

// Function to search for the target in an array, used at the top-most level
const findInArray = (nodes, id, name, output) => {
    for (let node of nodes) {
        output.paths.push(node.name);
        if (findInNode(node, id, name, output)) {
            if (!node.parentId) {
                output.found = true;
                break;
            }
        }
        output.paths.pop();
    }
}

output = { paths: [], found: false };
findInArray(data, 1212, 'julie', output);

console.log(output.found);
console.log(output.paths.join('/'));

Sorting and saving and identifying the parent-child connections among elements within an array

Answer №1

Similar questions

Print out the value of the element in the array using the console

Issues with the sliding mechanism

Bits of code and the internet

The webpage declined to show the content from 'https://www.youtube.com/watch?v=oKZRsBjQJOs' within a frame due to the 'X-Frame-Options' being set to 'sameorigin'

Executing jQuery code when reaching a specific moment in an HTML video

React with Typescript - Type discrepancies found in Third Party Library

What is the reason behind V8's perplexing error notification?

Instructions for selecting all checkboxes in an HTML table with just one click

Is it possible to generate a basic HTML page using Express JS without utilizing Ejs or any other templating engine

Navigate to a specific line in Vscode once a new document is opened

Choose all immediate parent items on the list in the mmenu

Clearing Out a Shopping Cart in Angular

I am unable to retrieve the images stored in the array

What is the best way to ensure that a mongoose .exec() callback has completed before checking the response object in express?

Finding the substring enclosed by two symbols using Javascript

Having issues with Vue 3 Typescript integration in template section

What could possibly be causing my app to exhaust CPU resources on Mozilla Firefox?

The spheres produced by the threeBSP method exhibit a lack of smoothness

Why is it that when I store a DOM element reference in a JavaScript Array, I cannot reuse that stored reference to add an event listener

An adhesive feature that halts upon reaching a specific element