What is the best way to output the leaf nodes from an array of object lists in TypeScript?

Question

What is the best way to output the leaf nodes from an array of object lists in TypeScript?

Having trouble with TypeScript, specifically working with arrays and filtering out leaf nodes. I want to print only the leaf nodes in the array, resulting in ['002', '004', '007']. Can someone please assist me? Excited to learn! Thank you in advance!

Here is the initial array structure:

[
        {
            Name: "A",
            HasChildren: true,
            Children: [
                {
                    Name: "002",
                    HasChildren: false,
                    Children: []
                },
                {
                    Name: "004",
                    HasChildren: false,
                    Children: []
                }
            ]
        },
        {
            Name: "007",
            HasChildren: false,
            Children: []
        }
    ]

If the array is:

[ {
                Name: "007",
                HasChildren: false,
                Children: []
  }
]

The resulting array should be: ['007']

javascript angular typescript frontend

Answer 1

Answer №1

If you want to display all the leaf elements in a structured data with nested children, you can follow this approach. Start by checking each element - if it has no children, print it out and move on to the next sibling. If it does have children, recursively go through each child using the same logic.

You can try implementing this solution in your TypeScript project using Stackblitz: https://stackblitz.com/edit/typescript-vfvyn7?file=index.ts

const elements = [
  {
    Name: 'A',
    HasChildren: true,
    Children: [
      {
        Name: '002',
        HasChildren: false,
        Children: [],
      },
      {
        Name: '004',
        HasChildren: false,
        Children: [],
      },
    ],
  },
  {
    Name: '007',
    HasChildren: false,
    Children: [],
  },
];
console.log(elements);

function printLeaves(elements: any[]) {
  for (const element of elements) {
    if (element.Children.length == 0) {
      console.log(element);
      continue;
    }
    printLeaves(element.Children);
  }
}

printLeaves(elements)

Answer 2

If you want to display all the leaf elements in a structured data with nested children, you can follow this approach. Start by checking each element - if it has no children, print it out and move on to the next sibling. If it does have children, recursively go through each child using the same logic.

You can try implementing this solution in your TypeScript project using Stackblitz: https://stackblitz.com/edit/typescript-vfvyn7?file=index.ts

const elements = [
  {
    Name: 'A',
    HasChildren: true,
    Children: [
      {
        Name: '002',
        HasChildren: false,
        Children: [],
      },
      {
        Name: '004',
        HasChildren: false,
        Children: [],
      },
    ],
  },
  {
    Name: '007',
    HasChildren: false,
    Children: [],
  },
];
console.log(elements);

function printLeaves(elements: any[]) {
  for (const element of elements) {
    if (element.Children.length == 0) {
      console.log(element);
      continue;
    }
    printLeaves(element.Children);
  }
}

printLeaves(elements)

What is the best way to output the leaf nodes from an array of object lists in TypeScript?

Answer №1

Similar questions

Listcell XUL with button options

Is there a way to display a PowerPoint presentation preview within an Angular application without utilizing the ngx-doc-viewer plugin?

Typescript: searching for a specific type within an array of objects

Creating form inputs dynamically in HTML and then sending them to a PHP script programmatically

When I attempt to click on the Cancel button, the database row remains undeleted

Can general principles be applied to determine which script is the most efficient and will load the quickest?

What is causing the undefined value to appear?

Create a pinia state by defining it through an interface without the need to manually list out each property

Is it possible to modify the timezone when using MuiPickersUtilsProvider?

Sorting a 2D array in Javascript based on numerical values

Mastering the art of simultaneously running multiple animations

What is the best way to include an external JavaScript file in a Bootstrap project?

Setting up the InMemoryCache in Vue ApolloConfiguring the InMemoryCache

Function with defer that calls itself repeatedly

Object-oriented programming in JavaScript allows for the passing of variables to a parent class using $

Issues with calculating SUM in MySQL within a Node.js Express application using EJS template

Tips for styling my date using MomentJS

Tips for avoiding the <p> and <br> elements while using a ContentEditable div

Flag form field as invalid in AngularJS

Utilizing a personalized directive within a ionic popup