I'm creating a custom visual in Microsoft Power BI. The creation api uses typescript and the d3 library. I'm also using jquery
I'm trying to create a hierarchical tree that represents the fields that are dragged into the visual. So the depth of the tree is decided during run-time so It doesn't know how many layers it will have.
I've managed to arrange my dummy data into a nested JSON array.
This is a screenshot from the console when I do console.log(finalViewModel)
[{ "text": "France","id": 591, "parent": 0, "identity": {long text},
"nodes"
[{"text": "Bread", "id", 478, "parent": 591, "identity: {long text},
"nodes" []},
{"text": "Nocco", "id", 498, "parent": 591, "identity: {long text},
"nodes" []},
{"text": "Red Wine", "id", 718, "parent": 591, "identity: {long
text},
"nodes" []}]},
{"text: "Germany", "id" .....so on and so forth
This is how my data looks when I JSON.stringify it in the console, also I used only 2 fields so It wouldn't be too cluttered.
"identity": {long text}, does not display like that. The identity field is for the Power BI selection manager so when something from the tree is clicked it will render into other visuals. long text Is a replacement for a very long array that holds the information for that certain item identity.
Now to the problem, I want to convert my JSON data into ul and li elements. Like this:
<ul>
<li>France</li>
<ul>
<li>Baguette</li>
<li>Nocco</li>
<li>Red Wine</li>
</ul>
<li>Germany</li>
</ul>
I've found many solutions to this kind of problem on the web but nothing seems to fit my needs.
Can anyone help me with a working code snippet?
Thanks in advance