Exploring the traversal of an array of objects within Tree Node

Question

Exploring the traversal of an array of objects within Tree Node

How can I transform my data into a specific Tree Node format?

Is there a method (using Typescript or jQuery) to iterate through each object and its nested children, grandchildren, and so on, and modify the structure?

Current data format

{
  "content": [
    {
      "dimension": "2019-12-13",
      "subList": [
        {
          "dimension": "2019-12-13",
          "subList": [
            {
              "dimension": "2019-12-13",
              "subList": []
            }
          ]
        }
      ]
    },
    {
      "dimension": "2019-12-13",
      "subList": [
        {
          "dimension": "2019-12-13",
          "subList": [
            {
              "dimension": "2019-12-13",
              "subList": []
            }
          ]
        }
      ]
    }
  ]
}

The expected result should look like this:

{
  "content": [
    {
      "data": {
        "dimension": "2019-12-13"
      },
      "children": [
        {
          "data": {
            "dimension": "2019-12-13"
          },
          "children": [
            {
              "data": {
                "dimension": "2019-12-13"
              },
              "children": []
            }
          ]
        }
      ]
    }
   ]
}

jquery typescript

Answer 1

Answer №1

When working with a tree-like data structure, it is best to use a recursive function for the task.

Let's define the types we are working with more formally:

type NodeA = { // current node structure
  name: string
  children: NodeA[]
}

type NodeB = { // desired node structure
  info: {
    name: string
  }
  descendants: NodeB[]
}

The recursive function to transform nodes may resemble this:

const convertNode = (node: NodeA): NodeB => {
  return {
    info: {
      name: node.name
    },
    descendants: node.children.map(convertNode)
  }
}

Answer 2

When working with a tree-like data structure, it is best to use a recursive function for the task.

Let's define the types we are working with more formally:

type NodeA = { // current node structure
  name: string
  children: NodeA[]
}

type NodeB = { // desired node structure
  info: {
    name: string
  }
  descendants: NodeB[]
}

The recursive function to transform nodes may resemble this:

const convertNode = (node: NodeA): NodeB => {
  return {
    info: {
      name: node.name
    },
    descendants: node.children.map(convertNode)
  }
}

Exploring the traversal of an array of objects within Tree Node

Answer №1

Similar questions

JQuery fixed div bounces unpredictably when scrolling

Interactive pop-up text box for data cells in a table

Unusual behavior exhibited by dynamic code in iframe

How to send the value of a JavaScript loop variable to PHP using AJAX

Change UL to a JSON format

Switch images when hovering

Scrolling with Jquery window.scrollTo results in the page becoming unresponsive

Unusual Behavior Uncovered in jQuery Selectors

Rearrange an element in an array from last to first position using typescript

"The value of a variable in jQuery's 'animate' function can be dynamically adjusted

Present a pop-up notification box with a countdown of 30 seconds prior to the expiration of a session timeout in JSF

What is the best approach to incorporate a stopwatch?

Please display the Bootstrap Modal first before continuing

Merge mocha with Typescript, and include the watch feature

if the input field is empty, eliminate the class

Need some assistance in finding a way to input multiple values from multiple buttons into a single input field in JavaScript

Angular2: the setTimeout function is executed just a single time

The error states that the type '() => string | JSX.Element' cannot be assigned to the type 'FC<{}>'

Implementing TypeScript module resolution with Cucumber-js can be a bit tricky

Tips for making use of incomplete types