Locate the parent and child elements within an array

Within the array provided below, there are parent items as well as children.

I am currently able to identify parents (depth 0) and their immediate children (depth 1), however I am unsure how to handle deeper nested levels.

For reference, you can view the fiddle here: http://jsfiddle.net/s3x5f4ap/2/

const comments = [
  { "depth": 0,"id": "f35vz2f"},
  { "depth": 0,"id": "f359354"},
  {   "depth": 1,"id": "f35e0b0", "parent_id": "f359354" },
  {     "depth": 2, "id": "f35ji24", "parent_id": "f35e0b0"},
  {     "depth": 2, "id": "f35rnwb", "parent_id": ""},
  {     "depth": 2, "id": "f35ojh4", "parent_id": "f35e0b0" },
  {       "depth": 3, "id": "f35lmch", "parent_id": "f35ji24"},
  {       "depth": 3, "id": "f35kl96", "parent_id": "f35ji24"}]

const parent = comments.filter(cm => cm.depth == 0);
final = [];
final = parent;

comments.forEach(a => {
  final.forEach(c => {
    if (c.id == a.parent_id) {
      c.child = []
      c.child.push(a);
    }
  })
})

console.log(final)

Answer №1

To create a tree structure, you can gather all connections between the nodes.

var data = [{ depth: 0, id: "f35vz2f" }, { depth: 0, id: "f359354" }, { depth: 1, id: "f35e0b0", parent_id: "f359354" }, { depth: 2, id: "f35ji24", parent_id: "f35e0b0" }, { depth: 2, id: "f35rnwb", parent_id: "" }, { depth: 2, id: "f35ojh4", parent_id: "f35e0b0" }, { depth: 3, id: "f35lmch", parent_id: "f35ji24" }, { depth: 3, id: "f35kl96", parent_id: "f35ji24" }],
    tree = function (data, root) {
        var t = {};
        data.forEach(o => {
            Object.assign(t[o.id] = t[o.id] || {}, o);
            t[o.parent_id] = t[o.parent_id] || {};
            t[o.parent_id].children = t[o.parent_id].children || [];
            t[o.parent_id].children.push(t[o.id]);
        });
        return t[root].children;
    }(data, undefined);

console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer №2

To create a tree-like structure, follow this approach:

var data = [{ depth: 0, id: "f35vz2f" }, { depth: 0, id: "f359354" }, { depth: 1, id: "f35e0b0", parent_id: "f359354" }, { depth: 2, id: "f35ji24", parent_id: "f35e0b0" }, { depth: 2, id: "f35rnwb", parent_id: "" }, { depth: 2, id: "f35ojh4", parent_id: "f35e0b0" }, { depth: 3, id: "f35lmch", parent_id: "f35ji24" }, { depth: 3, id: "f35kl96", parent_id: "f35ji24" }];
var attach_children_to_item = function (item, data) {
    item.children = data.filter(x => x.parent_id == item.id)
                        .map(x => attach_children_to_item(x, data));
    return item;
};
var tree = data.filter(x => x.depth == 0)
               .map(x => attach_children_to_item(x, data));
console.log(tree);

Keep in mind that there may be missing items if the depth is greater than 0 and the parent_id does not match another item.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The date range picker displays the previous arrow but not the next arrow

I am currently using the DateRangePicker tool and for some reason, I am not seeing the arrow that should appear on the right side. I have double-checked my configuration but can't seem to figure out what is causing this issue. In the image attached, ...

Exploring the capabilities of useRef in executing a function on a dynamically created element within a React/Remix/Prisma environment

I've been trying to implement multiple useRef and useEffect instructions, but I'm facing difficulties in getting them to work together in this scenario. The code structure involves: Remix/React, fetching data from a database, displaying the data ...

An issue has been encountered in the following module federation: `TypeError: g.useSyncExternalStore is not a function`

I encountered an error after deploying my next app with module federation: TypeError: g.useSyncExternalStore is not a function The same app works fine as a standalone application when run with yarn dev or yarn start, but it fails when using module federat ...

Can a JavaScript function be sent through a REST API using Node.js and Express?

I have a unique scenario where I need to send a custom JavaScript function as a response to a GET request made to an API endpoint. Currently, I am using Node.js with Express for my server implementation, but I am open to exploring other frameworks. When a ...

What is the best way to split an array into smaller chunks?

My JavaScript program fetches this array via ajax every second, but the response time for each request is around 3 to 4 seconds. To address this delay, I attempted to split the array into chunks, however, encountered difficulties in completing the task: { ...

Symfony form with JSON API

I am currently developing an application in Symfony 2.8 (using PHP 5.4) and I need to incorporate a list of projects from an API in JSON format into my form. However, I have hit a roadblock and I'm not sure how to proceed. The database behind the API ...

Modify the current link's <li> class

I am facing an issue with the code below which is supposed to change the class of li based on whether the browser URL matches the href attribute within that li. The current problem I am encountering is that the code changes the class for all li elements, ...

My Discord.js bot was running smoothly until I added a new command, and suddenly everything went haywire. Can someone assist me in figuring out what went

I recently delved into the world of creating discord bots by following a simple tutorial and customizing it to suit my needs. Initially, the bot worked perfectly fine. However, when I attempted to add the "Mistake" command, it stopped functioning properl ...

Verify whether an element in the array is being referenced in the file

In an attempt to check if certain array elements are being used, I have the following code. Please correct me where necessary: Firstly, I open the myclass.css file and iterate through each line to add all selectors that start with a hashtag or dot into an ...

By default, apply the active class to the initial element in the list and update the active class upon clicking in Next.js

As a newcomer to React, I am struggling with setting the active class in my CSS file. I have two classes, btn and active. My goal is to assign the active class to the first button by default and then switch it to the currently clicked button when interacti ...

Leverage the power of Next.js Dynamic routing query object with an SWR fetch request

While working with Next.js dynamic routing, I am facing an issue where my SWR fetch request is being called before the query object is properly set. This occurs specifically when using the routing query object. Let's take the example of a dynamic rou ...

The pagination feature for array field type is malfunctioning on Mongoose, yet it functions properly on the Mongo

I am facing an issue with pagination on the rating field of my product collection. After executing a query in the mongo shell, db.products.find({_id: ObjectId('610bd9233fdc66100f703dd4')}, {ratings: {$slice: [1,1]}}).pretty(); I received the ...

Guide to automatically loading a default child route in Angular 1.5 using ui-router

Hello, I am looking to set a default child route to load as soon as the page loads. Below is the code snippet: $stateProvider.state('userlist', { url: '/users', component: 'users', data:{"name":"abhi"}, resolv ...

Enhance your HTML audio player with added timeline functionality

I'm currently working on incorporating an HTML audio player into my project. I've managed to get the play/pause functionality to work, but now I'm stuck on adding a timeline feature. Additionally, I'm not sure how to implement the play/ ...

Pixel information from previous canvas remains intact post resizing

I have crafted a canvas and loaded pixel data at specific locations using the following code snippet. let maskCanvas = document.createElement("canvas"); let patchWidth = 30; let patchHeight = 30; let scale = 3; maskCanvas.setAttribute("class", "mask"); ...

transferring data from a form with a binary image file to store in an SQL server

I am aiming to create a form where users can upload an image along with some data fields. Currently, I can only get either the image or the data fields to work separately. The following code allows me to upload an image to my SQL database as binary data. I ...

Improve the parallax effect in your React component

Do you have any tips on smoothing out the scrolling animation for a React component with a simple parallax effect? I tried using requestAnimationFrame() in vanilla JS, but it doesn't seem to work well within the React component's rendering cycle. ...

The proper usage of middleware in vue-router

I've set up routes in Vue and added some middleware conditions before each route, but it's not functioning as expected. Below is the content of my router/index.js file: const token = computed(() => useAuthStore().token); // Main Router cons ...

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

Use JavaScript to switch the h1 title when selecting an option from the dropdown menu

As a beginner in coding, I am struggling to find a solution using an if statement for this particular problem. Although I can achieve the desired result with HTML code and options, this time I need to use arrays and an if function. My goal is to create a ...