Display dynamic nested JSON as Treeview on Front-end using Aurelia - json

Question

As is shown in the image, there are three objects in the current array. Those three objects are the "parents" and each parent has its own array of "children". This is the tricky part; a parent element can also be a child element of another parent element and can have its own child elements. This part is dynamic, meaning that users will create more "parent" elements and more "children" elements.
I want to display this JSON from the image in the front-end using Aurelia. How would I do that? Any ideas are very much welcome.

Answer 1

Aleksandar.
What you intend to do - render a tree structure on the DOM - using Aurelia, can be achieved with a bunch of options.
Being a recursive structure, it is convenient to define the structure that way; for example (note that the example assumes Typescript and bootstrap):
export interface TreeNode {
name: string;
children?: TreeNode[];
}
For the render, a solution is to define a Custom component holding the "Tree" and a custom component to render the nodes of the tree (in a recursive way).
So, you could do:
<require from="./tree"></require>
...
<tree source.bind="treeData"></tree>
The treeData could be:
treeData: TreeNodeModel[] = [
{ name: "node01", children: [{ name: "child011" }, { name: "child012" }, { name: "child013" }] },
{ name: "node02", children: [{ name: "child021" }, { name: "child022", children: [{ name: "child0221" }, { name: "child0222" }, { name: "child0223" }] }] },
{ name: "node03", children: [{ name: "child031" }] },
{ name: "node04", children: [{ name: "child041" }] },
{ name: "node05", children: [{ name: "child051" }] },
{ name: "node06", children: [{ name: "child061" }] },
{ name: "node07", children: [{ name: "child071" }] },
The implementation of the Tree custom componente would be:
import { bindable } from "aurelia-framework";
import { TreeNodeModel } from "./model";
export class Tree {
#bindable source: TreeNodeModel[];
}
The view for the Tree custom component:
<template>
<require from="./node"></require>
<div class="container">
<div repeat.for="node of source">
<node node.bind="node"></node>
</div>
</div>
</template>
The node custom component:
import { bindable } from "aurelia-framework";
import { TreeNodeModel } from "./model";
export class Node {
#bindable node: TreeNodeModel;
#bindable indent: number = 0;
}
The corresponding view:
<template>
<div style="margin-left: ${indent * 8}px;">
<div>${node.name}</div>
<div repeat.for="child of node.children">
<node node.bind="child" indent.bind="indent + 1"></node>
</div>
</div>
</template>
A working example with al the code is available at:
https://codesandbox.io/s/aurelia-recursive-tree-nodes-6fi9e?file=/src/node.html:0-226
Best wishes.