Разбор пути во вложенный список HTML с помощью JavaScript

Question

У меня есть несколько строк пути (по одной для каждого конечного узла), например

item1

item2

Папка с несколькими дочерними элементами / подпункт 3.1

Папка с несколькими детьми / Подпункт 3.2

Документ с некоторыми детьми / Подпункт 4.1

Документ с некоторыми детьми / Подпункт 4.2

Где пункт 1, пункт 2, подпункт 3.1.3.2,4.1 и 4.2 являются конечными узлами;И то, что я хочу сделать, это создать вложенный HTML-код следующим образом:

  <ul>
        <li>item1
        <li>item2
        <li>Folder with some children
            <ul>
                <li>Sub-item 3.1
                <li>Sub-item 3.2
            </ul>

        <li>Document with some children
            <ul>
                <li>Sub-item 4.1
                <li>Sub-item 4.2
            </ul>
    </ul>

Или объект JSON, подобный этому:

[
     {title: "Item 1"},
     {title: "Item 2"},
     {title: "Folder with some children",
         children: [
             {title: "Sub-item 3.1"},
             {title: "Sub-item 3.2"}
         ]
     },
     {title: "Document with some children",
         children: [
             {title: "Sub-item 4.1"},
             {title: "Sub-item 4.2"}
         ]
     }
]

Но мне трудно это делать.Я потратил 10 часов на это безрезультатно.Я открыт для использования jquery.Пожалуйста, вы можете направить меня в правильном направлении?Мой javascript все еще недостаточно хорош, чтобы делать эти вещи на лету.

Answer 1

Я обнаружил, что лучший способ сделать это - создать элементы html, используя javascript createElement и рекурсивную функцию, и просто добавить его в DOM.

Answer 2

Это не в jQuery, но, возможно, это могло бы помочь. Я разработал это после поиска в Интернете и не нашел решения.

http://www.chapleau.info/article/ArrayofUrlsToASitemap.html

Answer 3

Возможно, вы захотите исследовать «рекурсивные функции», это должно дать вам хорошее начало методам, полезным для решения подобных проблем.