mat-tree displaying child value integers as nodes

[JohnTranstel]

I am new to this so please say if this is better posted elsewhere.

I am building a mat-tree on the fly by creating a json string.
The string is:
" {"Politics":[],"Sport":[{"footie":[{"uefa":[]}]},{"sportsub":[]}],"Weather":[{"newdir":[]},{"weathersub":[]}"
It works fine but displays the child level value as an extra level, (see image) how do I lose this?

Code is

private populateTree(workdata) {

var dataObject = JSON.parse(workdata);
// Build the tree nodes from Json object. The result is a list of FileNode with nested
// file node as children.
const data = this.buildFileTree(dataObject, 0);
// Notify the change.
this.dataChange.next(data);
}

buildFileTree(obj: { [key: string]: any }, level: number, parentId: string = '0'): FileNode[] {
return Object.keys(obj).reduce<FileNode[]>((accumulator, key, idx) => {
const value = obj[key];
const node = new FileNode();
node.filename = key;
node.id = ${parentId}/${idx};

  if (value != null) {
    if (typeof value === 'object') {
      node.children = this.buildFileTree(value, level + 1, node.id);
    } else {
      node.type = value;
    }
  }

  return accumulator.concat(node);
}, []);

}

[andrewseguin]

Can you create a reproduction of this on StackBlitz to help save us time?

[JohnTranstel]

I am not sure, will try. John Evans From: Andrew Seguin [mailto:notifications@github.com] Sent: 19 August 2019 20:51 To: angular/components Cc: John Evans; Author Subject: Re: [angular/components] mat-tree displaying child value integers as nodes (#16815) Can you create a reproduction of this on StackBlitz to help save us time? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#16815?email_source=notifications&email_token=AEDZRJ5TOA3YJFQQXQRGDQ3QFL2RZA5CNFSM4IM2T7X2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4UDBOY#issuecomment-522727611>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AEDZRJ2JGV3BAAY2QSC7EGLQFL2RZANCNFSM4IM2T7XQ>.

[JohnTranstel]

I copied most of the relevant code from an existing stackblitz.
https://stackblitz.com/edit/mat-tree-with-drag-and-drop?file=app%2Ftree-flat-overview-example.ts

If you comment out line 87 then add the following 2 lines
var test = ' {"Politics":[],"Sport":[{"footie":[{"eufa":[]}]},{"sportsub":[]}],"Weather":[{"newdir":[]},{"weathersub":[]}] }';
var dataObject = JSON.parse(test);

you will see the result.

[JohnTranstel]

Looking at the stackblitz example and seeing how the tree behaves with the existing json object, I thing the issue is simply " why is the json string not correctly mapping to the equivalent json object? What should the string look like to do this?"

[walvekarnikhil]

There is a problem with the buildFileTree function. The expected Node structure doesn't match with what you have provided.
Here is original structure:

{
  Applications: {
    Calendar: 'app',
    Chrome: 'app',
    Webstorm: 'app'
  },
  Documents: {
    angular: {
      src: {
        compiler: 'ts',
        core: 'ts'
      }
    },
    material2: {
      src: {
        button: 'ts',
        checkbox: 'ts',
        input: 'ts'
      }
    }
  },
  Downloads: {
    October: 'pdf',
    November: 'pdf',
    Tutorial: 'html'
  },
  Pictures: {
    'Photo Booth Library': {
      Contents: 'dir',
      Pictures: 'dir'
    },
    Sun: 'png',
    Woods: 'jpg'
  }
}

Here is what you have provided:

{
  "Politics": [],
  "Sport": [
    {
      "footie": [
        {
          "eufa": []
        }
      ]
    },
    {
      "sportsub": []
    }
  ],
  "Weather": [
    {
      "newdir": []
    },
    {
      "weathersub": []
    }
  ]
}

In the expected structure, there are no arrays it is always {[key: string]: any}. Since the buildFileTree function uses Object.keys for the array it will use the index as the key.
You will have to modify the build function as per the input & output structure.

Here is modified stackblitz: https://stackblitz.com/edit/mat-tree-with-drag-and-drop-vgwpp1?file=app%2Ftree-flat-overview-example.ts