Javascript Nested Loop

Question

I'm not much code in Javascript, but I have the following snippet, which IMHO looks awful, and I have to often do this nested iteration in my code. Does anyone have a prettier / easier to read solution?

function addBrowse(data) {
var list = $('<ul></ul>')

for(i = 0; i < data.list.length; i++) {
    var file = list.append('<li class="toLeft">' + data.list[i].name + '</li>')
    for(j = 0; j < data.list[i].children.length; j++) {
        var db = file.append('<li>' + data.list[i].children[j].name + '</li>')
        for(k = 0; k < data.list[i].children[j].children.length; k++)
            db.append('<li class="toRight">' + data.list[i].children[j].children[k].name + '</li>')
    }
}

$('#browse').append(list).show()}

Here is an example data item

{"file":"","db":"","tbl":"","page":"browse","list":[
  {
     "name":"/home/alex/GoSource/test1.txt",
     "children":[
        {
           "name":"go",
           "children":[
              {
                 "name":"validation1",
                 "children":[

                 ]
              }
           ]
        }
     ]
  },
  {
     "name":"/home/alex/GoSource/test2.txt",
     "children":[
        {
           "name":"go",
           "children":[
              {
                 "name":"validation2",
                 "children":[

                 ]
              }
           ]
        }
     ]
  },
  {
     "name":"/home/alex/GoSource/test3.txt",
     "children":[
        {
           "name":"go",
           "children":[
              {
                 "name":"validation3",
                 "children":[

                 ]
              }
           ]
        }
     ]
  }]}

Thank you so much

Answer 1

It might be better to learn the mechanism of the JavaScript script:

• https://github.com/janl/mustache.js/
• https://github.com/jquery/jquery-tmpl

Answer 2

You can use jQuery functioneach() to make it better:

function addBrowse(data) {
  var list = $('<ul></ul>')

  $.each(data.list, function(_, item) {
    var file = list.append('<li class="toLeft">' + item.name + '</li>');
    $.each(item.children, function(_, child) {
      var db = file.append('<li>' + child.name + '</li>');
      $.each(child.children, function(_, grandchild) {
        db.append('<li class="toRight">' + grandchild.name + '</li>');
      });
    });
  });

  $('#browse').append(list).show();
}

, XSS. jQuery, . , , . , $.each - , for, , .

Answer 3

. , . , , , , . , .

Answer 4

jQuery, fiew, :

function addBrowse(data) {
    var list = $(document.createElement('ul')),
        li = $(document.createElement('li')),
        get_li;

    get_li = function(value, className) {
        className = className === undefined ? '' : className;
        return li.clone().text(value).addClass(className);
    };

    $.each(data.list, function (i, v) {
        list.append(get_li(v.name, 'toLeft'));
        $.each(v.children, function(i, v2) {
            list.append(get_li(v2.name));
            $.each(v2.children, function(i, v3) {
                list.append(get_li(v3.name, 'toRight'));
            });
        });
    });
    $('#browse').append(list).show();
}