Построить уль Ли из массива с помощью JQuery

Question

я получил массив, который выглядит следующим образом:

var myArray = { 
    "ABC.txt": "1", 
    "AD.txt": "2", 
    "uploads/": "1", 
    "uploads/Penguins.jpg": "1", 
    "uploads/Tulips.jpg": "2", 
    "morefiles.txt": "2" 
}; 

Я пытаюсь сделать ul li из него, как это:

<ul> 
    <li> 
    <a href="ABC.txt" pos="1">ABC.txt</a> 
    </li> 
    <li> 
    <a href="AD.txt" pos="2">AD.txt</a> 
    </li> 
    <li rel="folder"> 
    <a href="uploads/" pos="1">uploads</a> 
    <ul> 
     <li> 
     <a href="uploads/Penguins.jpg" pos="1">Penguins.jpg</a> 
     </li> 
     <li> 
     <a href="uploads/Tulips.jpg" pos="2">Tulips.jpg</a> 
     </li> 
    </ul> 
    </li> 
    <li> 
    <a href="morefiles.txt" pos="2">morefiles.txt</a> 
    </li> 
</ul> 

Я пытаясь сделать это до UL LI с помощью jQuery, и я придумал ничего, на самом деле просто обрывки кода ничего не стоят даже здесь.

Прошу немного помочь.

Answer 1

Похоже, что вам нужен какой-то шаблонный двигатель. Проверьте ICanHaz, где вы можете иметь что-то вроде:

<script id="user" type="text/html"> 
    <li> 
    <p class="name">Hello I'm {{ name }}</p> 
    <p><a href="http://twitter.com/{{ twitter }}">@{{ twitter }}</a></p> 
    </li> 
</script> 

И сценарий инициализации будет столь же просто, как:

var user = ich.user(user_data_object) 

Кроме того, в этой статье, Client-Side Templating объяснит вам что-то для:

<h1>{{title}}</h1> 
<ul> 
    {{#names}} 
     <li>{{name}}</li> 
    {{/names}} 
</ul> 

Наряду с этим:

var data = { 
    "title": "Story", 
    "names": [ 
     {"name": "Tarzan"}, 
     {"name": "Jane"} 
    ] 
} 

Чтобы быть преобразованы в это:

<h1>Story</h1> 
<ul> 
    <li>Tarzan</li> 
    <li>Jane</ul> 
</ul> 

Answer 2

Во-первых, переменная туАггау не является массивом, массив определяется внутри [], поэтому он должен выглядеть как этот

var myArray = [{"ABC.txt" : "1"}, {"AD.txt" : "2"}, {"uploads/" : "1"}, {"uploads/Penguins.jpg" : "1"}, {"uploads/Tulips.jpg" : "2"},{"morefiles.txt" : "2"}]; 

Но чтобы генерировать HTML в вашем вопросе вы, вероятно, лучше со следующей структурой:

var myArray = [ 
    { 
     "href":"ABC.txt", 
     "pos" : "1" 
    },{ 
     "href":"AD.txt", 
     "pos":"2" 
    }, 
    ...etc 
]; 

Затем использовать другой внутренний массив для создания вложенной

Вы можете просто перебрать массив, используя для цикла и добавлять элементы к, как вы идете