Transforming a collection of string arrays into a tree format, as well as reversing the process to convert the tree back into a list of string arrays

Question

Transforming a collection of string arrays into a tree format, as well as reversing the process to convert the tree back into a list of string arrays

I am working with a sorted array containing lists of string arrays:

0:['BS', 'MS','KHB', 'CCBPO']
1:['BS', 'MS','KHB', 'HBPO']
2:['BS', 'MS','KHB', 'PBPO']
3:['BS', 'PO','BC', 'BC']
4:['H', 'I','SS', 'ESS']
5:['H', 'I','SS', 'E']
6:['H', 'D','PCD', 'D']
7:['H', 'D','P', 'HP']
ECT

It can be noted that the first parent is always in the first position, like for example 'BS' and 'H', followed by the rest.

Converting this information into a hierarchical structure, the first row would look like this:

{
          "name": "BS",
          "children": [
            {
              "name": "MS",
        "children": [
            {
              "name": "KB",
        "children": [
            {
              "name": "KHB",
        "children": [
            {
              "name": "CCBPO",
              "isTrue": false
            },
              "isTrue": false
            },
              "isTrue": false
            },
              "isTrue": false
            },
              "isTrue": false
            },
        "isTrue": false

}

For subsequent rows, we need to check if the parent is the same and add the child in the correct position. For example, in the second row, the child will be added at the end.

Once this hierarchy is established, I intend to convert it into a structured table format. For the initial 4 rows, this conversion would look something like:

0:['BS', 'MS','KHB', 'CCBPO']
1:['', '','', 'HBPO']
2:['', '','', 'PBPO']
3:['', 'PO','BC', 'BC']

This transformation will allow me to visualize the tree data in a tabular manner.

javascript angular typescript

Answer 1

Answer №1

Looks like we have some work cut out for us - a recursive function is needed here. A recursive function calls itself under certain circumstances.

We will be creating a function that returns an array with names and children. The children are elements of the array where the first element matches the property name.

Let's start by creating createTreeAtempOne(array: any[]):


const tree = array.reduce((a: any, b: any) => {
  const el = a.find((x) => x.name == b[0]);
  if (el) 
    el.children.push(b.slice(1));
  else
    a.push({
      name: b[0],
      children: [b.slice(1)],
    });
  return a;
}, []);

If we feed this function with ['AA'], it should return something like:

{
  "name": "AA",
  "children": [
    []
  ]
}

But we don't want empty arrays for children. So let's modify the function to create createTreeAtempTwo(array: any[]):


const tree = array.reduce((a: any, b: any) => {
  const el = a.find((x) => x.name == b[0]);
  if (el){
    if (el.children)
      el.children.push(b.length > 1 ? b.slice(1) : b[0]);
    else
      el.children=[b.slice(1)]
  } else
    a.push(
      b.length > 1
        ? {
            name: b[0],
            children: [b.slice(1)],
          }
        : {name:b[0]}
    );
  return a;
}, []);
return tree;

Now, feeding this function with ['AA'] should return:

{
  "name": "AA"
}

Great! Now let's add recursion to our function in order to handle different values like [['AA'],['AA','BB']], etc.


createTree(array: any[]) {
  const tree = array.reduce((a: any, b: any) => {
    const el = a.find((x) => x.name == b[0]);
    if (el) {
      if (el.children)
        el.children.push(b.length > 1 ? b.slice(1) : b[0]);
      else
        el.children=[b.slice(1)];
    } else {
      a.push(
        b.length > 1
          ? {
              name: b[0],
              children: [b.slice(1)],
            }
          : {name:b[0]}
      );
    }
    return a;
  }, []);
  
  tree.forEach((t) => {
    if (t.children) t.children = this.createTree(t.children);
  });
  
  return tree;
}

After testing against different values, the function seems to be working!

You can check out the code on StackBlitz. Alternatively, you could simply use

<pre>{{tree|json}}</pre>

to display the data.

Answer 2

Looks like we have some work cut out for us - a recursive function is needed here. A recursive function calls itself under certain circumstances.

We will be creating a function that returns an array with names and children. The children are elements of the array where the first element matches the property name.

Let's start by creating createTreeAtempOne(array: any[]):


const tree = array.reduce((a: any, b: any) => {
  const el = a.find((x) => x.name == b[0]);
  if (el) 
    el.children.push(b.slice(1));
  else
    a.push({
      name: b[0],
      children: [b.slice(1)],
    });
  return a;
}, []);

If we feed this function with ['AA'], it should return something like:

{
  "name": "AA",
  "children": [
    []
  ]
}

But we don't want empty arrays for children. So let's modify the function to create createTreeAtempTwo(array: any[]):


const tree = array.reduce((a: any, b: any) => {
  const el = a.find((x) => x.name == b[0]);
  if (el){
    if (el.children)
      el.children.push(b.length > 1 ? b.slice(1) : b[0]);
    else
      el.children=[b.slice(1)]
  } else
    a.push(
      b.length > 1
        ? {
            name: b[0],
            children: [b.slice(1)],
          }
        : {name:b[0]}
    );
  return a;
}, []);
return tree;

Now, feeding this function with ['AA'] should return:

{
  "name": "AA"
}

Great! Now let's add recursion to our function in order to handle different values like [['AA'],['AA','BB']], etc.


createTree(array: any[]) {
  const tree = array.reduce((a: any, b: any) => {
    const el = a.find((x) => x.name == b[0]);
    if (el) {
      if (el.children)
        el.children.push(b.length > 1 ? b.slice(1) : b[0]);
      else
        el.children=[b.slice(1)];
    } else {
      a.push(
        b.length > 1
          ? {
              name: b[0],
              children: [b.slice(1)],
            }
          : {name:b[0]}
      );
    }
    return a;
  }, []);
  
  tree.forEach((t) => {
    if (t.children) t.children = this.createTree(t.children);
  });
  
  return tree;
}

After testing against different values, the function seems to be working!

You can check out the code on StackBlitz. Alternatively, you could simply use

<pre>{{tree|json}}</pre>

to display the data.

Transforming a collection of string arrays into a tree format, as well as reversing the process to convert the tree back into a list of string arrays

Answer №1

Similar questions

Issue encountered: TypeScript compiler (tsc) failed to compile a dependent library within a project, specifically one that depends on a JavaScript library and @types typing package

Update state within React components without impacting any other state variables

Steps for deploying an Ionic 4 app on the Firebase console

Can a javascript variable be integrated into JRoute() function?

Guide to extracting the JSON array from a JSON object with Angular

Provide information to spyOn and return a specific value

Pipe for Angular that allows for searching full sentences regardless of the order of the words

Guide on how to verify if a component with a specific name is registered within the Composition API of Vue 3

I struggle to grasp the significance of the scene's positioning

leveraging parcel for importing typescript dependencies

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

Creating multiple unique custom attributes for a specialized HTML element

In the Angular Google Maps API, is it possible to update the attributes of <agm-marker> directly within the TypeScript code?

Encountered an issue during the migration process from AngularJS to Angular: This particular constructor is not compatible with Angular's Dependency

In MUI React, the opacity of the placeholder is customizable and can be easily adjusted. This allows for the placeholder to be hidden

Can you please advise on excluding the entire module in Eslint without encountering any errors?

Using JavaScript to round up the number

Utilizing React JS: Displaying or Concealing Specific Components Based on the URL Path

Validate whether the path parameter in NextJS is null or empty before executing the query

The error message is: "Cannot access property 'up' of an undefined object within the material UI library using theme.breakpoints."