Преобразуйте JSON в дерево HTML

Question

Преобразуйте JSON в дерево HTML

Есть более простой способ:

find ... | while read -r file; do
    echo "look at my $file, my $file is amazing";
done

В качестве альтернативы:

while read -r file; do
    echo "look at my $file, my $file is amazing";
done <<< "$(find ...)"

14

javascript json

задан 4 July 2009 в 20:29

4 ответа

Другие вопросы по тегам:

javascript json

Похожие вопросы:

score 8 · Answer 1

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

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

score 0 · Answer 2

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

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

score 3 · Answer 3

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

3

ответ дан 1 December 2019 в 12:53

score 6 · Answer 4

I had a problem getting my browser to accept the data structure submitted by the OP, but here is a fully working example I've drawn up for my own, similar purposes. Beside the function I provide the data structure as well, with name/branches instead of title/folder.

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)); } renderTree()