Jade loop through object and assign childs to parents

Question

Jade loop through object and assign childs to parents

I have a Object called "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"}]

Now I want to loop through this object in Jade.

This is my current javascript function:

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

As you can see all boards with "parent_board" value are automatically assigned to their parent board.

So with this Javascript function my result looks like:

Lorem 1
- Lorem 1-1
Lorem 2

That's fine.

However I'm trying to archive this in pure Jade, but no luck. Here is my jade code:

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

This is the result:

Lorem 1
Lorem 2
- Lorem 1-1

What is wrong with my Jade code?

javascript
node.js
express
jade

Answer 1

The problem is that in the javascript code you are appending the second list to the correct parent element. In the jade code that you have you are merely appending it to the end of the html, therefore it will always be displayed in that particular order. The easy solution would be to put the Lorem 1-1 object after Lorem1 in the array, but that is very inefficient.

Templating engines are really only for very light logic and we're getting into the realms of complex logic without changing the data structure a little. It might be better to change your boards object to two separate objects:

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

So that your jade code can change to this:

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

Alternatively an even better solution would be to change the boards object so that subboards are inside the parent board:

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 for populating the object from flat data structure. Note that in the jade template you should probably change it so it only inserts boards with parent_board == 0 or remove the subboard objects from the main array:

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