Javascript 将对象转换为ul li元素

我有一个数组中的对象列表

var myLevel = ['sub', 'topic', 'type']

var myCollection = new Array();
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 1', type: 'fib', topic: 'topic 2'});
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mtf'});
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 2', type: 'mcq', topic: 'topic 1'});
myCollection.push({sub: 'Book 2', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 2', topic: 'topic 1', type: 'mcq'});

我想用ul和li将这些东西转换成适当的列表，并且列表的级别取决于myLevel变量。

• 第一册
  • 专题1
    • mcq
    • mtf
  • 专题2
    • 小谎
• 第二册
  • 专题1
    • mcq

每个部分都有唯一的子项，不能有相同的子项

我尝试将元素创建到myCollection的循环中

for(var i=0; i<myCollection.length; i++)
{
    for(var j=0; j<myLevel.length; j++)
    {
        createMyTree(myCollection[i][myLevel[j]);
    }
}


function createMyTree(str)
{
     //?????????????
}

---

for（var i=0；i好的，所以我重新编辑了它，它可以工作，除非有一个问题：主题1 get被拆分为两个主题1，因为主题2 get插入了它们之间

var myLevel = ['sub', 'topic', 'type'];

var myCollection = new Array();
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 1', type: 'fib', topic: 'topic 2'});
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mtf'});
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 2', type: 'mcq', topic: 'topic 1'});
myCollection.push({sub: 'Book 2', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 2', topic: 'topic 1', type: 'mcq'});

var dom="<ul>";
var used = new Array();
var currentItems = new Array(myLevel.length);
var lastJ = -1;

for(var i=0; i<myCollection.length; i++)
{
    var con = false;
    for(var k=0; k<used.length; k++){
        if(compareObjects(used[k], myCollection[i]))
            con = true;
    }
    if(!con){
        for(var j=0; j<myLevel.length; j++){
            if(currentItems[j] !== myCollection[i][myLevel[j]]){
                if(lastJ !== -1){
                    for(var l=0; l<lastJ-j; l++){
                        dom+="</ul></li>";   
                    }
                }
                for(var l=j+1; l<currentItems.length; l++)
                    currentItems[l] = "";
                currentItems[j] = myCollection[i][myLevel[j]];
                dom+="<li>"+currentItems[j]+(j<myLevel.length-1?"<ul>":"");
                lastJ = j;
            }
        }
        used.push(myCollection[i]);
    }
}
dom+="</ul>";
$('body').html(dom);

function compareObjects(obj1, obj2){
    if(obj1.length != obj2.length)
        return false;
    for(var el in obj1){
        if(obj2[el] === undefined)
            return false;
        if(obj1[el] !== obj2[el])
            return false;
    }
    return true;
}

var myLevel=['sub'，'topic'，'type']；
var myCollection=新数组（）；
push（{sub:'Book 1'，topic:'topic 1'，type:'mcq'}）；
push（{sub:'Book 1'，topic:'topic 1'，type:'mcq'}）；
push（{sub:'Book 1'，type:'fib'，topic:'topic 2'}）；
push（{sub:'Book 1'，topic:'topic 1'，type:'mtf'}）；
push（{sub:'Book 1'，topic:'topic 1'，type:'mcq'}）；
push（{sub:'Book 2'，键入：'mcq'，主题：'topic 1'}）；
push（{sub:'Book 2'，topic:'topic 1'，type:'mcq'}）；
push（{sub:'Book 2'，topic:'topic 1'，type:'mcq'}）；
var dom=“
”；
使用的变量=新数组（）；
var currentItems=新数组（myLevel.length）；
var lastJ=-1；
因为（var i=0；i似乎经过很多努力，我已经用一些技巧得到了我的答案

var $out;
$(document).ready(function()
{

    for(var i=0; i<myCollection.length; i++)
    {
        $out = $('#out');
        for(var j=0; j<levelTree.length; j++)
        {
            var itemName = myCollection[i][levelTree[j]];
            var level = j;

            /**********************************************************/


                var $con;
                if($out.children().eq(0).length == 0)
                {
                    $con = $('<ul></ul>');
                    $con.append('<li>'+ itemName + '</li>');
                    $out.append($con);
                }
                else
                {
                    var flag = $out.children().eq(0).children().filter(function(i, e)
                    {
                         return (this.childNodes[0].textContent == itemName);
                    });
                    console.log(flag.length);
                    if(flag.length == 0)
                    {
                        $out.children().eq(0).append('<li>' + itemName + '</li>');
                    }
                }

                var ele = $out.children(0).eq(0).children().filter(function(i, e)
                {
                    return (this.childNodes[0].textContent == itemName);
                }).get();
                $out = $(ele);


            /**********************************************************/
        }
    }
});

var$out；
$（文档）.ready（函数（）
{
for（var i=0；使用嵌套数组（Book=>Topics=>Type）谢谢，但是任何ul中的列表都应该是唯一的，不应该重复。它还依赖于myLevel变量，用于嵌套级别。数组中是否有必要存在重复项，或者是否可以删除它们？是的。这是强制性的，因为我需要创建树结构。最终我无法更改myCollection，它可以是任何内容，并且它的级别可以通过rom myLevel变量。很抱歉，我花了这么长时间，但这是一个非常难回答的问题，这正是我想要的。非常感谢Markai:）