将后台返回数据去重并渲染到树状图上

今天做项目时遇到了个树状图渲染的问题，这边要求最终实现效果如下，显示所有企业所有的汽车车牌号:

后台返回的数据格式将每个企业对应的车辆分别为一条一条数据，我当时的想法是让后台返回一个企业为一个对象，该对象又包含着一个车辆数组对象，鉴于后台同事说接口没法实现这样的数据格式，因此实现字段处理需要前端来实现。

后台返回的数据：var items=[{"Cid":11,"Cname":'企业1',"Pno":'粤Axxxx1',"Vid":'p11'},

{"Cid":11,"Cname":'企业1',"Pno":'粤Axxxx2',"Vid":'p12'},

{"Cid":12,"Cname":'企业2',"Pno":'粤Bxxxx1',"Vid":"p21"},

{"Cid":12,"Cname":'企业2',"Pno":'粤Bxxxx2',"Vid":'p22'}....];

而树图渲染需要的数据格式为：

var zNodes = [

{ id: 1, pId: 0, name: '广东省企业汇总', open: true },
{ id: 11, pId: 1, name: '东莞市xxx企业', open: true },
{ id: 111, pId: 11, name: '粤xxxx1', icon: "../../resources/images/timg.png" },
{ id: 112, pId: 11, name: '粤xxxx2', icon: "../../resources/images/timg.png" },
{ id: 12, pId: 1, name: '广州市xxx企业', open: true },
{ id: 121, pId: 12, name: '粤xxxx1', icon: "../../resources/images/timg.png" },
{ id: 122, pId: 12, name: '粤xxxx2', icon: "../../resources/images/timg.png" },
{ id: 13, pId: 1, name: '深圳市xxx企业', open: true },
{ id: 131, pId: 13, name: '粤xxxx1', icon: "../../resources/images/timg.png" },
{ id: 132, pId: 13, name: '粤xxxx2', icon: "../../resources/images/timg.png" },

];

我的想法是先得到如下数据的一个数组，再转变为树图所需格式：

dataRender = [

{"父节点ID1":[{"Cid",'企业id'},{"Cname":'企业名称'},Vitems:[{"Vid":'汽车1id',"Pno":"汽车1车牌号"},{"Vid":'汽车2id',"Pno":"汽车2车牌号"}]},

{"父节点ID2":[{"Cid",'企业id'},{"Cname":'企业名称'},Vitems:[{"Vid":'汽车1id',"Pno":"汽车1车牌号"},{"Vid":'汽车2id',"Pno":"汽车2车牌号"}]}.....];

第一步，把items数组对象转为dataRender对象，这一步涉及到数组去重，考虑到通过key值可以直接判断是否已经存在该ID的企业，因此以ID号作为数组的key值，并且以该key值属性为一个对象；

实现代码如下：

    $.each(items,function(i,item){
        if(!dataRender[item.Cid]){
            dataRender[item.Cid]={"Cid":item.Cid,"Cname":item.Cname,Vitems:[{"Pno":item.Pno,"Vid":item.Vid}]};
        }else{
            dataRender[item.Cid].Vitems.push({"Pno":item.Pno,"Vid":item.Vid});
        }
    });

第二步，得到dataRender后，将dataRender转为树图数据格式，即zNodes数组对象，实现代码如下：

    var zNodes = [{ id: 'p1', pId: 0, name: '广东省企业汇总', open: true }];
    $.each(dataRender,function(Cid,item){
        // console.log(i,item.Vitems);
        zNodes.push({id:Cid,pId:'p1',name:item.Cname,open: true});
        $.each(item.Vitems,function(i,item){
            zNodes.push({id:item.Vid, pId:Cid, name:item.Pno});
        });
    });

控制台输出zNodes数据如下：

第三步，将数据渲染到树图div中，

html:

    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>

javascript:

var setting = {
        check:{
            enable:true
        },
        data:{
            simpleData:{
                enable:true
            }
        }
    };
    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });

即可达到预设效果，该过程中，js使用了三次each循环遍历，但是总觉得应该还有其他更方便的js代码可以实现这个过程的转换，请洒潘江，各倾陆海云尔，希望能够有更好更快的js得以实现这个过程~~