Unable to display data in PrimeNG Treenode Component

Question

I am trying to display data in Treenode format in angular 5 project.

I am getting the data from service which is in the below form (in object form):

    {
  "data": [
    {
      "label": "Documents",
      "data": "Documents Folder",
      "expandedIcon": "fa fa-folder-open",
      "collapsedIcon": "fa fa-folder",
      "children": [
        {
          "label": "Work",
          "data": "Work Folder",
          "expandedIcon": "fa fa-folder-open",
          "collapsedIcon": "fa fa-folder",
          "children": [
            {
              "label": "Expenses.doc",
              "icon": "fa fa-file-word-o",
              "data": "Expenses Document"
            },
            {
              "label": "Resume.doc",
              "icon": "fa fa-file-word-o",
              "data": "Resume Document"
            }
          ]
        },
        {
          "label": "Home",
          "data": "Home Folder",
          "expandedIcon": "fa fa-folder-open",
          "collapsedIcon": "fa fa-folder",
          "children": [
            {
              "label": "Invoices.txt",
              "icon": "fa fa-file-word-o",
              "data": "Invoices for this month"
            }
          ]
        }
      ]
    },
    {
      "label": "Pictures",
      "data": "Pictures Folder",
      "expandedIcon": "fa fa-folder-open",
      "collapsedIcon": "fa fa-folder",
      "children": [
        {
          "label": "barcelona.jpg",
          "icon": "fa fa-file-image-o",
          "data": "Barcelona Photo"
        },
        {
          "label": "logo.jpg",
          "icon": "fa fa-file-image-o",
          "data": "PrimeFaces Logo"
        },
        {
          "label": "primeui.png",
          "icon": "fa fa-file-image-o",
          "data": "PrimeUI Logo"
        }
      ]
    },
    {
      "label": "Movies",
      "data": "Movies Folder",
      "expandedIcon": "fa fa-folder-open",
      "collapsedIcon": "fa fa-folder",
      "children": [
        {
          "label": "Al Pacino",
          "data": "Pacino Movies",
          "children": [
            {
              "label": "Scarface",
              "icon": "fa fa-file-video-o",
              "data": "Scarface Movie"
            },
            {
              "label": "Serpico",
              "icon": "fa fa-file-video-o",
              "data": "Serpico Movie"
            }
          ]
        },
        {
          "label": "Robert De Niro",
          "data": "De Niro Movies",
          "children": [
            {
              "label": "Goodfellas",
              "icon": "fa fa-file-video-o",
              "data": "Goodfellas Movie"
            },
            {
              "label": "Untouchables",
              "icon": "fa fa-file-video-o",
              "data": "Untouchables Movie"
            }
          ]
        }
      ]
    }
  ]
}

I have the HTML as below:

<p-tree [value]="files"></p-tree>

Where the files is of type as below

files: TreeNode[];

I am getting the error as below:

Error:

Cannot find a differ supporting object '[object Object]'

Request you to please help me in converting the object to the Array of Treenodes Format.

Thanks in advance.

is your object in your component or is it added in an external file ? — Shanil Arjuna, Aug 28 '18 at 08:47
Object is getting loaded from .json file which i have placed in assets folder and i am accessing the same in this way: `this.http.get("http://localhost:4200/assets/files.json")` — Namratha Sreedhar, Aug 28 '18 at 08:48

score 0 · Answer 1 · answered Aug 29 '18 at 23:41

When you declare the type as TreeNode[]- you need to tell which object it is referencing

Please follow the below example. (File names are just for example). Feel free to use your own

create a file called preset.data.ts

export class PresetsProjectsData {

  static manukas = [
    {
      'label': 'Manuka',
      'data': 'Manuka',
      'expandedIcon': 'fa-folder-open',
      'collapsedIcon': 'fa-folder',
      'selectable': false,
      'children': [
        {'label': 'Monofloral Manuka', 'icon': 'avatar', 'data': 'fe'},
        {'label': 'Multifloral Manuka', 'icon': 'avatar', 'data': 'be'}
      ]
    }
  ];
}

In your html file:

<p-tree [value]="manukasTree"></p-tree>

In your TS file: Import the preset file first

import {TreeNode} from 'primeng/primeng';
import {PresetsProjectsData} from './preset.data';

And in your export class declaration. Map it like below.

 manukasTree: TreeNode[] = PresetsProjectsData.manukas;

Hope it should work.

S.Voulgaris · Answer 2 · 2019-07-21T22:28:53.690

You can construct files: TreeNode[] property within your .ts file using a recursive fuction to be sure that it is referenced properly:

import { TreeNode } from 'primeng/primeng';

files: TreeNode[] = [];

ngOnInit() {
  this.dataStore.forEach( (item: Data) => {
            if (!item.parent) {
              this.files.push(this.generateTreeStructure(item));
            }
  });
}

generateTreeStructure( parentNode: Data ): TreeNode {
        let parentNodeChildren: TreeNode[] = [];
        let item: TreeNode = {
          label: parentNode.title,
          data: JSON.stringify(parentNode),
          expandedIcon: "fa fa-folder-open",
          collapsedIcon: "fa fa-folder",
          children: []
        };
        this.dataStore.forEach(item => {
          if (parentNode.id === item.parent.id) {
            let childNode: TreeNode = {
              label: item.title,
              data: JSON.stringify(item),
              expandedIcon: "fa fa-folder-open",
              collapsedIcon: "fa fa-folder",
              children: []
            };
            childNode = this.generateTreeStructure(item);
            parentNodeChildren.push(childNode);
          }
        });
        item.children.push(...parentNodeChildren);
        return item;
  }

score 0 · Answer 3 · edited Apr 07 '22 at 00:14

I solved with the following:

categoriesFormat: TreeNode[];
categoriesFormatStack: TreeNode[];
selectedCategory: TreeNode[];
convertToTreeNode(
     categories: Category[],
     index: number,
     treeNode: TreeNode = null
 ) {
     if (treeNode == null) {
         const root = categories.find((c) => c.parentId == -1);
         this.categoriesFormat = [];
         this.categoriesFormatStack = [];
         let node = {
             data: {
                 id: root.id,
                 name: root.name,
                 code: root.code,
                 parentId: root.parentId,
             },
         };
         this.categoriesFormat.push(node);
         this.categoriesFormatStack.push(node);
         index++;
         categories = categories.filter((c) => c.parentId !== -1);
         return this.convertToTreeNode(
             categories,
             index,
             this.categoriesFormat[0]
         );
     } else {
         const newNode = categories.find(
             (c) => c.parentId === treeNode.data.id
         );
         if (typeof newNode !== 'undefined') {
             let node = {
                 data: {
                     id: newNode.id,
                     name: newNode.name,
                     code: newNode.code,
                     parentId: newNode.parentId,
                 },
             };
             if (typeof treeNode.children === 'undefined') {
                 treeNode.children = [];
             }
             treeNode.children.push(node);
             this.categoriesFormatStack.push(node);
             categories = categories.filter((c) => c.id !== newNode.id);
             return this.convertToTreeNode(categories, index, treeNode);
         } else {
             if (categories.length > 0) {
                 treeNode = this.categoriesFormatStack[index];
                 index++;
                 this.convertToTreeNode(categories, index, treeNode);
             }
         }
     }
 }

// you can call this.convertToTreeNode(this.categories, 0)

Unable to display data in PrimeNG Treenode Component

3 Answers3