将数组的JSON数组转换为< ul>和< li>元素 [英] Turn a JSON array of arrays into <ul> and <li> elements

问题描述

我正在Microsoft Power BI中创建自定义图像。创建api使用打字稿和d3库。我还使用了jQuery

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.

我设法将虚拟数据整理到嵌套的JSON数组。

I've managed to arrange my dummy data into a nested JSON array.

这是我做console.log（finalViewModel）时从控制台获得的屏幕截图

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

这是我在控制台中进行JSON.stringify数据处理时的外观，我也只使用了2个字段，所以不会太混乱。

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.

身份：{long text} ，不会那样玩。标识字段用于Power BI选择管理器，因此当单击树中的内容时，它将呈现为其他视觉效果。 长文本是用于替换包含特定商品标识信息的长数组的。

"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.

现在，出现此问题了，我想将JSON数据转换为ul和li元素。像这样：

 <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?

预先感谢

推荐答案

这里是一个演示如何使用纯JavaScript来实现的示例。

Here is a demo how it could be achieved with the pure javascript.

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'); 
}
  

<div class="container">
</div>

这篇关于将数组的JSON数组转换为< ul>和< li>元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！