Create a custom template needed by an Angular module using data from a JSON reply

Question

Create a custom template needed by an Angular module using data from a JSON reply

I received JSON data from my API endpoint with a specific structure:

[
    {
      "id": 1,
      "title": "Smells like",
      "object": "",
      "children": [
        {
          "id": 2,
          "title": "Liquid",
          "object": {
            "objectid": 1,
            "title": "My object also have children",
            "children": []
          },
          "children": [
            {
              "id": 3,
              "title": "Loyal",
              "object": "",
              "children": []
            },
            {
              "id": 4,
              "title": "Smart",
              "object": "",
              "children": [
                {
                  "id": 5,
                  "title": "Smart",
                  "object": "",
                  "children": []
                }
              ]
            }
          ]
        },
        {
          "id": 6,
          "title": "Just empty",
          "object": {
            "objectid": 2,
            "title": "Title of my object",
            "children": []
          },
          "children": []
        }
      ]
    },
    {
      "id": 10,
      "title": "Apple",
      "object": "",
      "children": [
        {
          "id": 11,
          "title": "Ink",
          "object": "",
          "children": []
        },
        {
          "id": 12,
          "title": "Whatever",
          "object": "",
          "children": []
        }
      ]
    }
  ]

To convert this JSON to a format compatible with the Angular component I am using, follow this structure:

[
  new Link({
    id: 1,
    label: "Smells like",
    title: "Smells like",
    object: "",
    children: [
      new Link({
        id: 2,
        label: "Liquid",
        title: "Liquid",
        object: {
          objectid: 1,
          title: "My object also have children",
          children: [],
        },
        children: [
          new Link({
            id: 3,
            label: "Loyal",
            title: "Loyal",
            object: "",
            children: [],
          }),
          new Link({
            id: 4,
            label: "Smart",
            title: "Smart",
            object: "",
            children: [
              new Link({
                id: 5,
                label: "test",
                title: "test",
                object: "",
                children: [],
              }),
            ],
          }),
        ],
      }),
      new Link({
        id: 6,
        label: "Just empty",
        title: "Just empty",
        object: { objectid: 2, title: "Title of my object", children: [] },
        children: [],
      }),
    ],
  }),
  new Link({
    id: 10,
    label: "Apple",
    title: "Apple",
    object: "",
    children: [
      new Link({ id: 11, title: "Ink", object: "", children: [] }),
      new Link({
        id: 12,
        label: "Whatever",
        title: "Whatever",
        object: "",
        children: [],
      }),
    ],
  }),
];

Some key points:

The new structure wraps root and children nodes with a new Link()
A label is added based on the title of each node
Sometimes, other objects in the JSON might have children properties where a new link wrapper is not necessary.

If you need help converting the first JSON structure to the required format in TypeScript, feel free to ask!

angular typescript

Answer 1

Answer №1

If you're looking to create nodes using recursion, here's a helpful function:

const createLink = (itemList) => itemList.map(item => {
    new Link({
        id: item.id,
        label: item.label,
        title: item.title,
        object: item.object,
        children: item.children.length ? createLink(item.children) : []
    })
})

This function will loop through all the items in your response. When it encounters items with children, it will call itself recursively to iterate through those children. Make sure to add an empty array if there are no children present.

Another point to note is that there are children arrays within objects as well. To handle this, you can create a helper function like so:

const createLink = (itemList) => itemList.map(item => {
    new Link({
        id: item.id,
        label: item.label,
        title: item.title,
        object: createObject(item.object),
        children: createLink(item.children)
    })
})

const createObject = (object) => {
    return {
        objectid: object.objectid,
        title: object.title,
        children: createLink(object.children)
    }
}

In summary, the createLink function allows you to map through subscription items and create a new array. You can use it within your subscriptions like this:

this.someService().subscribe(response => {
  this.convertedTree = this.createLink(response));
}

Don't forget to define your Link class and update the functions accordingly for smooth execution. The updated code also includes checks for empty arrays or objects.

For further reference and implementation, check out the demo on StackBlitz: https://stackblitz.com/edit/angular-primeng-tree-node-bbrmgs?file=src%2Fapp%2Fapp.component.ts

Answer 2

If you're looking to create nodes using recursion, here's a helpful function:

const createLink = (itemList) => itemList.map(item => {
    new Link({
        id: item.id,
        label: item.label,
        title: item.title,
        object: item.object,
        children: item.children.length ? createLink(item.children) : []
    })
})

This function will loop through all the items in your response. When it encounters items with children, it will call itself recursively to iterate through those children. Make sure to add an empty array if there are no children present.

Another point to note is that there are children arrays within objects as well. To handle this, you can create a helper function like so:

const createLink = (itemList) => itemList.map(item => {
    new Link({
        id: item.id,
        label: item.label,
        title: item.title,
        object: createObject(item.object),
        children: createLink(item.children)
    })
})

const createObject = (object) => {
    return {
        objectid: object.objectid,
        title: object.title,
        children: createLink(object.children)
    }
}

In summary, the createLink function allows you to map through subscription items and create a new array. You can use it within your subscriptions like this:

this.someService().subscribe(response => {
  this.convertedTree = this.createLink(response));
}

Don't forget to define your Link class and update the functions accordingly for smooth execution. The updated code also includes checks for empty arrays or objects.

For further reference and implementation, check out the demo on StackBlitz: https://stackblitz.com/edit/angular-primeng-tree-node-bbrmgs?file=src%2Fapp%2Fapp.component.ts

Create a custom template needed by an Angular module using data from a JSON reply

Answer №1

Similar questions

How do I properly type when extending Button and encountering an error about a missing component property?

Utilizing Angular 2's ngModel feature for dynamic objects and properties

Setting state dynamically in Typescript with ReactJS

Error encountered: Module 'redux-saga/effects' declaration file not found. The file '.../redux-saga-effects-npm-proxy.cjs.js' is implicitly typed as 'any'. Error code: TS7016

Experimenting with an API request in Angular 2

What could be the reason for receiving 'undefined' in TypeScript after saving data in a variable?

A comprehensive guide on utilizing the loading.tsx file in Next JS

Angular: efficient exchange of information among components

The functionality of allowEmpty : true in gulp 4.0 does not seem to be effective when dealing with

Angular click event to compute a function and display the result on a separate page

The Angular CLI seems to be having trouble locating modules that are clearly present within the workspace

Single instance property binding for Angular

Error TS2307: Module 'passport' is nowhere to be found

Setting `throwIfNamespace=true` in the `.babelrc` file for a `create-react-app` project

Troubleshooting Cross-Origin Resource Sharing problem in .NET 6 when integrating with IONIC/Angular

OnPush strategy and template updates: Propagating modifications to the parent component

Managing the onChange event for a MaterialUI dropdown component

Error encountered following repo duplication

Issues with Typescript and TypeORM

The combination of ampersand with JSON and Angular6 creates a powerful