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

问题描述

我正在 Microsoft Power BI 中创建自定义视觉对象.创建 api 使用 typescript 和 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.

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

"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屋！