Navigating through a node tree and making changes to its configuration and content

Question

Navigating through a node tree and making changes to its configuration and content

Here's the input I have. Some nodes have downlines with multiple other nodes nested inside.

data = [
  {
    "user_id": "1",
    "username": "johndoe001",
    "amount": "0.00",
    "downlines": [
      {
        "user_id": "2",
        "username": "j001-01",
        "amount": "1.00",
        "downlines": []...

How can I convert it to the output structure below?

[
    {
      "key": "1",
      "label": "johndoe001 (0.00)",
      "nodes": [
        {
          "key": "2",
          "label": "j001-01 (1.00)",
          "nodes": []...

I've managed to partially convert it using string replacements, but I'm struggling to update the label value by combining username and amount. Additionally, removing unnecessary keys like amount is posing a challenge.

let stringJson = JSON.stringify(data);
stringJson = stringJson.replace(/downlines/g, 'nodes');
stringJson = stringJson.replace(/username/g, 'label');
stringJson = stringJson.replace(/user_id/g, 'key');
let tmpTree = JSON.parse(stringJson);

typescript

Answer 1

Answer №1

Using a recursive function simplifies the process:

const data = [
  {
    "user_id": "1",
    "username": "johndoe001",
    "amount": "0.00",
    "downlines": [
      {
        "user_id": "2",
        "username": "j001-01",
        "amount": "1.00",
        "downlines": []
      },
    ]
  },
];

function rename(downlines) {
    return downlines.map(({ user_id, username, amount, downlines }) => ({
        key: user_id, // changing user_id to key
        label: `${username} (${amount})`, // adjusting label format
        nodes: rename(downlines), // recursively renaming other elements
    }));
}

console.log(rename(data));

If you find the ({ ... }) => syntax confusing, refer to destructuring on MDN.

Answer 2

Using a recursive function simplifies the process:

const data = [
  {
    "user_id": "1",
    "username": "johndoe001",
    "amount": "0.00",
    "downlines": [
      {
        "user_id": "2",
        "username": "j001-01",
        "amount": "1.00",
        "downlines": []
      },
    ]
  },
];

function rename(downlines) {
    return downlines.map(({ user_id, username, amount, downlines }) => ({
        key: user_id, // changing user_id to key
        label: `${username} (${amount})`, // adjusting label format
        nodes: rename(downlines), // recursively renaming other elements
    }));
}

console.log(rename(data));

If you find the ({ ... }) => syntax confusing, refer to destructuring on MDN.

Navigating through a node tree and making changes to its configuration and content

Answer №1

Similar questions

Injecting dynamic templates in Angular 7

Attempting to use a string as an index for the type `{ firstName: { inputWarning: string; inputRegex: RegExp; }` is not allowed

Event triggered by an Angular counter

Encountering an error in Angular 2: "date.getMonth is not a function

Utilizing Router Outlet in Angular to Access API Data

Encountered compilation errors while trying to compile the entry-point @ng-bootstrap/ng-bootstrap with `es2015` as esm2015. Compilation was unsuccessful

Matching multiline input with RegExp and grouping matches from consecutive lines

Angular - Using the 'name' attribute with the 'mat-select' element

How can one access a dynamically generated element in Angular without using querySelector?

What are the counterparts of HasValue and .Value in TypeScript?

Tips for maintaining the active state of an item within a component that loops through a dataset

Ensure there is a gap between each object when they are arranged in a

Terser is causing ng build --prod to fail

Having difficulty updating the value of a FieldArray with setFieldValue in Formik

ExitDecorator in TypeScript

Error: An unexpected character (.) was encountered | Building with npm has failed

When you click, you will be directed to the specific details of the object

Choosing multiple lists in Angular 2 can be achieved through a simple process

A guide on streamlining the process of generating "this." variables within Angular

Exploring the TypeScript Type System: Challenges with Arrays Generated and Constant Assertions