Turn a JSON array of arrays into <ul> and <li> elements

Question

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

Answer 1

You can achieve this with pure javascript. Here is an example

var createSublist = function(container, args) {

  var ul = document.createElement('ul');

  

  for(var j = 0; j < args.length; j++) {

    var row = args[j];

    

    var li = document.createElement('li');

    li.innerText = row.text;

    

    var nodes = row.nodes;

    if(nodes && nodes.length) {

      createSublist(li, nodes);

    }

    

    ul.appendChild(li);

  }

  

  container.appendChild(ul);

};

var data =[  

   {  

      "text":"France",

      "nodes":[  

         {  

            "text":"Bread"

         },

         {  

            "text":"Nocco"     

         }

      ],

   },

   {  

      "text":"Italy",

      "nodes":[  

         {  

            "text":"Pizza"

         },

         {  

            "text":"Wine",

            "nodes": [

              { 

                  "text": "Red"

              },

              { 

                  "text":"White"

              }

            ]

         }

      ]

   }

];

var container = document.getElementsByClassName('container')[0];  

if(container) 

{ 

  createSublist(container, data);

} 

else 

{

  console.log('Container has not been found'); 

}