jquery - 将数组的 JSON 数组转换为 和 元素

Question

我正在 Microsoft Power BI 中创建自定义视觉对象。创建 api 使用 typescript 和 d3 库。我也在使用 jquery

我正在尝试创建一个分层树来表示被拖入视觉对象的字段。所以树的深度是在运行时决定的，所以它不知道它会有多少层。

我已经设法将我的虚拟数据安排到一个嵌套的 JSON 数组中。

这是我执行 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 个字段，所以它不会太困惑。

"identity": {long text}，不会那样显示。标识字段用于 Power BI 选择管理器，因此当单击树中的某些内容时，它将呈现为其他视觉效果。 长文本 是一个非常长的数组的替代品，该数组包含特定项目标识的信息。

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

 <ul>
    <li>France</li>
    <ul>
        <li>Baguette</li>
        <li>Nocco</li>
        <li>Red Wine</li>
    </ul>
    <li>Germany</li>
</ul>

我在网上找到了很多解决此类问题的方法，但似乎没有一个适合我的需要。

谁能帮我写一个有效的代码片段？

提前致谢

Answer 1

这是一个演示如何使用纯 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>