Question

In javascript, I have an array of objects that represents an arbitrarily deep list…

data =
[
 { title, depth },
 { title, depth },
 { title, depth }, 
 { title, depth }, 
]

…where depth is how deep in the list the element is.

I want to convert this data into html.

For example:

[
 { title: "one", depth : 1 },
 { title: "two", depth : 1 },
 { title: "three", depth : 2 }, 
 { title: "four", depth : 3 }, 
 { title: "five", depth : 1 }, 
]

becomes…

<ul>
  <li><p>one</p></li>
  <li>
    <p>two</p>
    <ul>
      <li>
        <p>three</p>
        <ul>
          <li><p>four</p></li> 
        </ul>
      </li>
    </ul>
  </li>
  <li><p>five</p></li>
</ul>

What is the simplest way to do this, using jQuery?

Thanks

Answer 1

Here is one way you could do it:

(function($) {
  $.listify = function(items) {
    var container = $('<div></div>'), root = container;
    var depth = 0;
    for (var i = 0; i < items.length; ++i) {
      var item = items[i];
      if (item.depth > depth) {
        while (item.depth > depth) {
          var ul = $('<ul></ul>').appendTo(container);
          var li = $('<li></li>').appendTo(ul);
          container = li;
          ++depth;
        }
      } else if (item.depth <= depth) {
        while (item.depth < depth) {
          container = container.parent().parent();
          --depth;
        }
        container = $('<li></li>').insertAfter(container);
      }
      container.append('<p>' + item.title + '</p>');
    }
    return root.children();
  }
})(jQuery);

I admit, I just wanted to name something listify. Here is a jsFiddle. You would call it like so:

$.listify([
  { title: "one", depth : 1 },
  { title: "two", depth : 1 },
  { title: "three", depth : 2 }, 
  { title: "four", depth : 3 }, 
  { title: "five", depth : 1 }, 
]).appendTo(document.body);