Checkbox hierarchy with dynamic json using ngx-treeview

Question

I am trying to achieving ngx-treeview kind UI using my dynamic json response. But It gives me error like below:

not assignable to type treeitem

Below is my json :

   {
  "id": "2",
  "parentId": "0",
  "value": "banks",
  "children": [
    {
      "id": "54",
      "parentId": "2",
      "value": "MasterCard",
      "children": [
        {
          "id": "5",
          "parentId": "54",
          "value": "US branch",
          "children": [],
          "level": 2,
          "deletable": false
        },
        {
          "id": "56",
          "parentId": "UK branch",
          "value": "Cognition",
          "children": [
            {
              "id": "51",
              "parentId": "56",
              "value": "Manager dept",
              "children": [],
              "level": 3,
              "deletable": false
            },
            {
              "id": "52",
              "parentId": "56",
              "value": "Technical dept",
              "children": [],
              "level": 3,
              "deletable": false
            }
          ],
          "level": 2,
          "deletable": false
        }
      ],
      "level": 1,
      "deletable": false
    },
    {
      "id": "74",
      "parentId": "2",
      "value": "e-Zest Banglore",
      "children": [],
      "level": 1,
      "deletable": true
    },
    {
      "id": "75",
      "parentId": "2",
      "value": "Axis",
      "children": [
        {
          "id": "77",
          "parentId": "75",
          "value": "Axis india",
          "children": [],
          "level": 2,
          "deletable": false
        }
      ],
      "level": 1,
      "deletable": false
    }
  ],
  "level": 0,
  "deletable": false
}

my component.ts:

  import { TreeviewItem, TreeviewConfig } from 'ngx-treeview';
  ...
  dropdownEnabled = true;
  items: TreeviewItem[];
  values: number[];
  config = TreeviewConfig.create({
    hasAllCheckBox: true,
    hasFilter: false,
    hasCollapseExpand: true,
    decoupleChildFromParent: false,
    maxHeight: 250
  });

  ngOninit(){
    this.items = this.getHierarchcategories();
  }

  getHierarchcategories(): TreeviewItem[] {
        const companydata = new TreeviewItem({
      {
        "id": "2",
        "parentId": "0",
        "value": "e-Zest",
        "children": [
          {
            "id": "54",
            "parentId": "2",
            "value": "MasterCard",
            "children": [
              {
                "id": "5",
                "parentId": "54",
                "value": "hi",
                "children": [],
                "level": 2,
                "deletable": false
              },
              {
                "id": "56",
                "parentId": "54",
                "value": "Cognition",
                "children": [
                  {
                    "id": "51",
                    "parentId": "56",
                    "value": "Technotica 2",
                    "children": [],
                    "level": 3,
                    "deletable": false
                  },
                  {
                    "id": "52",
                    "parentId": "56",
                    "value": "Techno3",
                    "children": [],
                    "level": 3,
                    "deletable": false
                  }
                ],
                "level": 2,
                "deletable": false
              }
            ],
            "level": 1,
            "deletable": false
          },
          {
            "id": "74",
            "parentId": "2",
            "value": "e-Zest Banglore",
            "children": [],
            "level": 1,
            "deletable": true
          },
          {
            "id": "75",
            "parentId": "2",
            "value": "e-Zest Pune",
            "children": [
              {
                "id": "77",
                "parentId": "75",
                "value": "e-Zest Hinjewdi",
                "children": [],
                "level": 2,
                "deletable": false
              }
            ],
            "level": 1,
            "deletable": false
          }
        ],
        "level": 0,
        "deletable": false
      }
    });

    return [companydata];
  }

my component.html is like below:

  <ngx-treeview
    [config]="config"
    [items]="items"
  >
      </ngx-treeview>

by running this code I am getting this error. Can we achieve tree view with this kind of json format? Thanks..!!

Answer 1

The constructor new TreeViewItem(item) requires that the parameter item fulfills the interface TreeItem; That interface is:

interface TreeItem {
    text: string;
    value: any;
    disabled?: boolean;
    checked?: boolean;
    collapsed?: boolean;
    children?: TreeItem[];
}

(source)

There are two things going wrong here, one easier to fix than the other. The easy one is that your JSON contains extra properties which are not part of the TreeItem interface. This is the source of the property id does not exist on interface TreeItem error in your screenshot.

Extra properties are only a problem when the object is created within the function call. So you can define your JSON separately and that error will go away.

 const myJson = { /** your data here **/ }; 
 const companydata = new TreeviewItem(myJson);

Unfortunately now you get the second error, which is the more difficult one. Interface TreeItem requires that each item in the tree have a property value, which it does, and also have a property text, which you don't have. In order to be passed into the TreeviewItem constructor, you will need to map your JSON such that it has this missing {text: string} property on each node.