Преобразование JSON в дерево HTML

Я хотел бы создать дерево HTML (желательно UL-LI) из приведенного ниже примера JSON. Кто-нибудь имеет простой, рекурсивную функцию JS (а не фреймворк), которая может обрабатывать эту конкретную структуру? Спасибо за вашу помощь!Преобразование JSON в дерево HTML

{ "folder" : [ { 
    "title" : "1", 
    "folder" : [ { 
     "title" : "1.1", 
     "folder" : [ { 
      "title" : "1.1.1", 
     } , { 
      "title" : "1.1.2", 
     } ] 
    } ] 
} , { 
    "title" : "2", 
} ] }

источник

2009-07-04 Anonymous

function to_ul (obj) { 
    // --------v create an <ul> element 
    var f, li, ul = document.createElement ("ul"); 
    // --v loop through its children 
    for (f = 0; f < obj.folder.length; f++) { 
    li = document.createElement ("li"); 
    li.appendChild (document.createTextNode (obj.folder[f].title)); 
    // if the child has a 'folder' prop on its own, call me again 
    if (obj.folder[f].folder) { 
     li.appendChild (to_ul (obj.folder[f].folder)); 
    } 
    ul.appendChild (li); 
    } 
    return ul; 
}

Оговорка: не проверяя нет ошибок! Если отсутствует «заголовок» или «папка», все это может взорваться.

Приветствия,

источник

2009-07-04 20:47:43 Boldewyn

Это также отсутствует добавление литиево в ул. Добавьте ul.appendChild (li) перед закрытием цикла for, и он должен работать. –

Существует также проблема со сроком действия: название UL просто добавлено к нему. Это то, что не совсем полезно. – Boldewyn

Хорошо, разрешено! Нет никакого названия, чтобы пойти с UL. – Boldewyn

@Boldewyn: Я считаю, что вы также можете использовать для ... В цикле вместо обычного для цикла, чтобы сократить код немного. Конечно, у меня нет большого опыта использования этого типа цикла, поэтому, пожалуйста, проверьте мой фрагмент кода.

for (var i in obj.folder) { 
    li = document.createElement ("li"); 
    li.appendChild (document.createTextNode (i.title)); 
    // if the child has a 'folder' prop on its own, call me again 
    if (i.folder) { 
     li.appendChild (to_ul (i.folder)); 
    } 
}

источник

2009-07-04 21:14:34 zacharyliu

Да, это тоже. – Boldewyn

Я включил его в свой ответ, спасибо! – Boldewyn

Нет, снова вытащил. I будет содержать диапазон 0..n, а не элементы массива. – Boldewyn

У меня была проблема с получением мой браузер принимать структуру данных, представленную О.П., но вот полностью рабочий пример, который я нарисовал на моих собственных, подобных целей. Помимо функции я предоставляю структуру данных, а также имя/ветви вместо названия/папки.

<html> 
<head> 
<script> 
function to_ul(branches) { 
    var ul = document.createElement("ul"); 

    for (var i=0, n=branches.length; i<n; i++) { 
     var branch = branches[i]; 
     var li = document.createElement("li"); 

     var text = document.createTextNode(branch.name); 
     li.appendChild(text); 

     if (branch.branches) { 
      li.appendChild(to_ul(branch.branches)); 
     } 

     ul.appendChild(li); 
    } 

    return ul; 
} 

function renderTree() { 
    var treeEl = document.getElementById("tree"); 

    var treeObj = {"root": [{ 
     "name": "George & Sarah Trede", 
     "branches": [{ 
      "name": "George & Frances Trede", 
      "branches" : [{ 
       "name": "Mary (Trede) Jempty" 
      },{ 
       "name": "Carol (Trede) Moeller" 
      }] 
     },{ 
      "name": "Mary (Trede) Sheehan" 
     },{ 
      "name": "Ward Trede" 
     }] 
    }]}; 

    treeEl.appendChild(to_ul(treeObj.root)); 
} 
</script> 
</head> 

<body onload="renderTree()"> 
<div id="tree"></div> 
</body> 

</html>

источник

2009-07-20 18:22:46

Я использовал PURE с некоторым успехом в прошлом для такого рода вещи.

источник

2009-08-20 16:32:24 Surya

Проверьте jquery plugin JSON2HTML, это немного проще в использовании, чем PURE, и я использовал его на нескольких сайтах, которые я создал.

http://json2html.com

источник

2011-06-23 18:52:34 Chad

ссылка не удалось обновить ссылку – wilsonrufus

function to_li(obj, name) { 
    var li = document.createElement("li"); 
    if (typeof(name) != "undefined") { 
     var strong = document.createElement("strong"); 
     strong.appendChild(document.createTextNode(name + ": ")); 
     li.appendChild(strong); 
    } 
    if (typeof(obj) != "object"){ 
     li.appendChild(document.createTextNode(obj)); 
    } else { 
     var ul = document.createElement ("ul"); 
     for (var prop in obj){ 
      ul.appendChild(to_li(obj[prop],prop)); 
     } 
     li.appendChild(ul); 
    } 
    return li; 
}

источник

2011-12-30 23:32:24

Преобразование JSON в дерево HTML

ответ

Смежные вопросы