Converting a json schema to ng2-tree treemodel in Angular 4

Question

I want to display in Tree view of Json in UI which can be edit and save dynamically.

Currently I am trying with TreeModel in Angular 4 but here Json schema and TreeModel schema is different.

I searched for the same in internet but could able to find.

1.Is there any way I can convert Json schema to treeModel?

2.Is there other way I can directly use json as input and show/edit it dynamically?

TreeModel example:

    {
value: 'Programming languages by programming paradigm',
children: [{
        value: 'Object-oriented programming',
        children: [{
                value: 'Java'
            },
            {
                value: 'C++'
            },
            {
                value: 'C#'
            }
        ]
    },
    {
        value: 'Prototype-based programming',
        children: [{
                value: 'JavaScript'
            },
            {
                value: 'CoffeeScript'
            },
            {
                value: 'Lua'
            }
        ]
    }
]

}

Json Example:

    {
"compileOnSave": false,
"compilerOptions": {
  "outDir": "./dist/out-tsc",
  "baseUrl": "src",
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es5",
  "typeRoots": [
    "node_modules/@types"
  ],
  "lib": [
    "es2016",
    "dom"
  ]
}

}

Answer 1

You can build a class and a component for a Json node and recurvisely display them after parsing the Json string into your JsonNode tree.

export class JsonNode {
    value: string;
    children: JsonNode[];
}

Build a tree of JsonNode objects, and in template:

selector: 'json-node'
template: '... <div *ngFor="let child of children"></div>'

Answer 2

Check this componenent https://angular2-tree.readme.io/docs . Seems that is what are you looking for.