玉石如何遍历对象并将子项分配给父项

Question

玉石如何遍历对象并将子项分配给父项

3

我有一个名为“boards”的对象。

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

现在我想在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>";
    }
  }
}

正如您所看到的，所有“parent_board”值的板子都会自动分配给它们的父板。

因此，使用此JavaScript函数，我的结果如下：

Lorem 1
- Lorem 1-1
Lorem 2

这很好。

然而，我正在尝试在纯Jade中实现这一点，但没有成功。以下是我的Jade代码：

each board in boards
  if board.parent_board
    ul
      li = #{board.title}
  else
    li = #{board.title}

这是结果：

Lorem 1
Lorem 2
- Lorem 1-1

我的Jade代码有什么问题？

- Steven

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DF_ · Accepted Answer

问题在于JavaScript代码中你将第二个列表附加到了正确的父元素，而在你拥有的Jade代码中，你只是将它附加到HTML的末尾，因此它总是以特定顺序显示。简单的解决方案是将Lorem 1-1对象放在Lorem1之后的数组中，但那样效率非常低下。

模板引擎实际上仅用于非常轻量级的逻辑，而我们正在进入复杂逻辑的领域，如果不稍微改变数据结构，这可能会更好地改变你的面板对象为两个单独的对象：

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"}];

所以你的玉代码可以变成这样：

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模板中，您应该将其更改为仅插入parent_board == 0的board或从主数组中删除subboard对象：

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