How to integrate API to angular tree view

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-get-column-data',
    templateUrl: './get-column-data.component.html',
    styleUrls: ['./get-column-data.component.css']
})
export class GetColumnDataComponent implements OnInit {
    constructor(private apiData: IntegrationService) { }
    jsonData: any;
    requestData: any = {
        Data: [
            {
                customer_id: null,
                asset_type_name: null,
                asset_id: null,
                json_type: null,
                subsystem: null,
            },
        ],
    };

    ngOnInit(): void {
        // Implement your tree-view selection logic to update `requestData`

        // Call the API with updated `requestData`
        this.apiData.getApiData(this.requestData).subscribe((response: any) => {
            if (response.status === 200) {
                const data = response.data;
                data.forEach((element: any) => {
                    console.log(element.columnValue);
                });
            } else {
                console.error('Failed to fetch data');
            }
        });
    }
}

I have a POST API that takes input from a treeview-selected option. Based on that selection, it calls an API and displays a list in the treeview. At each step of the treeview, the API is called with different requestData.

In my example you provided, you hard-coded the requestData because you didn’t know how to obtain the selected treeview variable and replace it with the value in the requestData key.

For instance, if “customer” is selected as 2, it calls the API, which returns a list of “asset_type_name.” After selecting 2 as the customer_id, all “asset_type_name” values are displayed in the treeview. Subsequently, the selected “asset_type_name” is replaced with the value in the requestData object, and the API is called again to return a list of the next step’s values.

API Response format

{
    "status": 200,
    "message": "List of distict asset_id's",
    "data": [
        {
            "columnValue": 26,
        },
        {
            "columnValue": 371,
        },
        {
            "columnValue": 370,
        },
        {
            "columnValue": 369,
        },
        {
            "columnValue": 368,
        },
}
}

Example of tree-view what i want to integrate with my API example

Leave a Comment