Question

我正在Microsoft Power BI中创建自定义图像。创建api使用打字稿和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个字段，所以不会太混乱。

“身份”：{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>

Answer 2

JavaScript ES6 和一个小的递归函数

/**
 * Convert Tree structure to UL>LI and append to Element
 * @syntax getTree(treeArray [, TargetElement [, onLICreatedCallback ]])
 *
 * @param {Array} tree Tree array of nodes
 * @param {Element} el HTMLElement to insert into
 * @param {function} cb Callback function called on every LI creation
 */

const treeToHTML = (tree, el, cb) => el.append(
  tree.reduce((ul, n) => {
    const li = document.createElement("li");

    if (cb) cb.call(li, n);
    if (n.nodes?.length) treeToHTML(n.nodes, li, cb);

    ul.append(li);
    return ul;
  }, document.createElement("ul"))
);





// DEMO TIME:

const myTree = [{
  "id": 1,
  "parent_id": 0,
  "name": "Item1",
  "nodes": [{
    "id": 2,
    "parent_id": 1,
    "name": "Item2"
  }]
}, {
  "id": 4,
  "parent_id": 0,
  "name": "Item4",
  "nodes": [{
      "id": 9,
      "parent_id": 4,
      "name": "Item9"
    }, {
      "id": 5,
      "parent_id": 4,
      "name": "Item5",
      "nodes": [{
        "id": 3,
        "parent_id": 5,
        "name": "Item3"
      }]
    }
  ]
}];

treeToHTML(myTree, document.querySelector("#demo"), function(node) {
  this.textContent = `${node.parent_id} ${node.id} ${node.name}`
});

<div id="demo"></div>

将数组的JSON数组转换为<ul>和<li>元素

2 个答案: