Javascript Jade循环对象并将子对象指定给父对象

我有一个物体叫做“木板”

现在我想在这件玉器上绕一圈

这是我当前的javascript函数：

var htmlElem = document.getElementById('htmlElemId');
htmlElem.innerHTML = "";

for(var i = 0; i < boards.length; i++){
  if(boards[i].parent_board == 0){
    htmlElem.innerHTML += "<li id='" + boards[i].id + "'>" + boards[i].title + "</li>";
  }else{
    var parent = document.getElementById(boards[i].parent_board);
    if (parent){
      parent.innerHTML += "<ul><li id='" + boards[i].id + "'>" + boards[i].title + "</li></ul>";
    }
  }
}

结果是：

• 洛雷姆1
• 洛雷姆2
  • 洛雷姆1-1

---

我的Jade代码有什么问题？

问题在于，在javascript代码中，您将第二个列表附加到正确的父元素。在您拥有的jade代码中，您只是将它附加到html的末尾，因此它将始终按照特定的顺序显示。简单的解决方案是将Lorem 1-1对象放在数组中Lorem1之后，但这是非常低效的

模板引擎实际上只适用于非常轻的逻辑，我们正在进入复杂逻辑领域，而不需要稍微改变数据结构。最好将boards对象更改为两个单独的对象：

boards = [{"id":1,"parent_board":0,"title":"Lorem 1","description":"ec40db959345153a9912"},
         {"id":2,"parent_board":0,"title":"Lorem 2","description":"bb698136a211ebb1dfedb"}];

subboards = [{"id":3,"parent_board":1,"title":"Lorem 1-1","description":"6062bc28a9f781e06417d"}];

以便您的jade代码可以更改为：

each board in boards
  li = #{board.title}
  each subboard in subboards
    if subboard.parent_board == board.id
      ul
        li = #{subboard.title} 

或者，更好的解决方案是更改boards对象，使子板位于母板内部：

boards = [{"id":1,"parent_board":0,"title":"Lorem 1","description":"ec40db959345153a9912", "subboards": 
             [{"id":3,"parent_board":1,"title":"Lorem 1-1","description":"6062bc28a9f781e06417d"}]},
         {"id":2,"parent_board":0,"title":"Lorem 2","description":"bb698136a211ebb1dfedb"}];

each board in boards
  li = #{board.title}
  each subboard in board.subboards
      ul
        li = #{subboard.title} 

JS用于从平面数据结构填充对象。请注意，在jade模板中，您可能应该更改它，使其仅插入父_board==0的板，或从主阵列中删除子板对象：

for(var i = 0; i < boards.length; i++){

  var boardId = boards[i].id;
  var boardParent = boards[i].parent_board;

  if(boardParent !== 0){
    // Check to see if the array exists for a start
    if (!boards[boardParent].subboards) {
        // If not then create a new array
        boards[boardParent].subboards = [];
    }
    boards[boardParent].subboards.push(boards[i]);
  }
}

for（变量i=0；i

感谢您的精彩回答。我认为你的第二种方法是最好的。但我如何用“subboards”键创建这样的对象呢？如何将这些子板分配给它们的父“子板”键？这取决于您如何构建对象。它是来自一个数据库还是他们都坐在一张桌子上的东西？如果是，则您必须提取任何具有

父电路板的电路板！==0，然后将其添加到相关
板
对象的
子板
数组中。非常感谢您的帮助。还有最后一个问题：如何将子板添加到“相关板对象的子板数组”中？以下是我的方法（javascript）：我知道这超出了范围，但我感谢您的帮助。谢谢我在回答中增加了一个部分。
boards = [{"id":1,"parent_board":0,"title":"Lorem 1","description":"ec40db959345153a9912", "subboards": 
             [{"id":3,"parent_board":1,"title":"Lorem 1-1","description":"6062bc28a9f781e06417d"}]},
         {"id":2,"parent_board":0,"title":"Lorem 2","description":"bb698136a211ebb1dfedb"}];

each board in boards
  li = #{board.title}
  each subboard in board.subboards
      ul
        li = #{subboard.title} 

for(var i = 0; i < boards.length; i++){

  var boardId = boards[i].id;
  var boardParent = boards[i].parent_board;

  if(boardParent !== 0){
    // Check to see if the array exists for a start
    if (!boards[boardParent].subboards) {
        // If not then create a new array
        boards[boardParent].subboards = [];
    }
    boards[boardParent].subboards.push(boards[i]);
  }
}