jQuery利用循环输出列表项问题

Question

 $(document).ready(function(){
    for(var i =0;i<obj2.length;i++){
        x += '<li class="list"><span class="area">' + obj2[i] + '</span><ul class="item"></ul></li>';
            }
    $("#menu").html(x);
/*    —————————————————————————————————————分割———————————————————————————————————————————*/
    for(var i =0;i<obj.WaterFactory.length;i++){
        var temp = $(".area:contains('obj.WaterFactory[i].area')").next();
        var temp2 = '<li><a class="factory">' + obj.WaterFactory[i].name +'</a></li>';
        temp.append(temp2)；
    }
});/*我把代码简化了一下，有两个数组 
其中obj.WaterFactory的值是WaterFactory对象，即 
    obj.WaterFactory = [{name:"A",area:"甲"},{name:"B",area:"甲"},{name:"C",area:"乙"}... ]
area会有重复，所以我将它取出去重后生成另一个数组 obj2。我的目的是先在id="menu"的列表项中输出area,作为列表项.
输出后得到的是：
    <ul id="menu"> 
        <li class="list"> <span class="area">甲</span> <ul class="item"></ul> </li>
        <li class="list"> <span class="area">乙</span> <ul class="item"></ul> </li>
                                        ......
    </ul>
    
再将name信息插入到对应area项中的子列表<ul class="item"></ul>中去,对应后半部分代码，最后生成的应该是类似以下结构：
    <ul id="menu"> 
        <li class="list"> <span class="area">甲</span> 
            <ul class="item">
               <li><a class="factory">A</a></li>
               <li><a class="factory">B</a></li>
            </ul>
        </li>
        <li class="list"> <span class="area">乙</span> 
            <ul class="item">
               <li><a class="factory">C</a></li>
            </ul>
        </li>
                                        ......
    </ul>
 */现在问题是如果我把后半部分代码注释掉，前半部分确实是可以生成的，但如果不注释，页面就是空的。 谁能帮一下我，真心感谢～

Answer 1

[{area:"甲",items:["A","B"]},{area:"乙",items;["C","D"]}... ]
如此的话，你可以一套循环下来 知道子集
数据是经过分组的，可能在数据结构上修正会更合理一些

Answer 2

<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<ul id="menu"></ul>
<script>
$(document).ready(function(){
function getSubLis(data){
var html = "";
for(var i = 0,o;o = data[i];i++){
html += '<li><a class="factory">' + o +'</a></li>';
}
return html;
}
var obj = {};
obj.WaterFactory = [{name:"A",area:"甲"},{name:"B",area:"甲"},{name:"C",area:"乙"}];
var data1 = {};
for(var i = 0,o;o = obj.WaterFactory[i];i++){
if(data1[o.area]){
data1[o.area].push(o.name);
}
else{
data1[o.area] = [o.name];
}
}
var html = "";
for(var area in data1){
html += '<li class="list">\
<span class="area">' + area + '</span>\
<ul class="item">' + getSubLis(data1[area]) + '</ul>\
  </li>';
}
$("#menu").html(html);
});
</script>