动态数据循环遍历的问题

Question

代码如下，这是从后台获取的左侧菜单栏，现在我要想在一级菜单前面加上不同的小图标，怎么在ajax里面设置，小图标放在标签里，怎么给每个小图标设置不同的类名来显示不同的图标，具体的代码应该怎么写？

function getSubMenu(id){
        var url = '${ctx }/getSubMenu.action';
        $.ajax({  
            async : false,    
            type : 'post',    
            url : url,    
            data : {    
                'parentId' : id
            },    
            success : function(data) { 
                var data = eval('('+data+')');
                var length = data.length;
                if(length<=0){
                    $(".index").show();
                    $("#left").hide();
                    $(".footer").hide();
                    $('#indexP').attr('src', '${ctx}/index.action');
                }else{
                    $(".index").hide();
                    $("#left").show();
                    $(".footer").show();
                    var html ='' ;
                    $.each(data, function(idx, obj) {
                        var flag = false;
                           if(obj.parentId==id){
                               $.each(data, function(idx2, obj2) {
                                if(obj2.parentId == obj.id){
                                    flag = true;
                                }
                            });
                            if(flag){
                                var h = '';
                                h += '<li><div class="main-menu left-li">'+obj.label+'</div><ul class="sub-menu">';
                                $.each(data, function(idx3, obj3) {
                                    if(obj3.parentId == obj.id){
                                        h += '<li><a class="easyui-linkbutton" id="'+obj3.id+'"  href="javascript:void(0);"  onclick="addTab(\''+obj3.label+'\',\''+obj3.targetUrl+'\',\''+obj3.icoPath+'\')"><i class="icons"></i>'+obj3.label+'</a></li>';
                                    }
                                });
                                h += '</ul></li>';
                                html += h;
                            }else{
                                html += '<li><a class="easyui-linkbutton main-menu1 left-li" id="'+obj.id+'"  href="javascript:void(0);"  onclick="addTab(\''+obj.label+'\',\''+obj.targetUrl+'\',\''+obj.icoPath+'\')">'+obj.label+'</a></li>';
                            }
                        }
                    });
                    $("#subMenu").html(html);
                    $.getScript("${ctx}/baseStyle/js/index.js");
                }
                
            }    
        }); 
    }

Answer 1

首先不要用eval，用$.parseJSON()或者JSON.parse() 然后 ，数据格式设计让后台直接给你返回来，如果用class来做就和后台约定好类名，或者直接让后台返回imgUrl

Answer 2

最简单的就是让后端在处理数据的时候就加上类名

Answer 3

直接在each循环的时候加上不同的class，然后css不同的class写不同的图标，这样不行吗？

Answer 4

使用<i [attr.class]="icon"></i>的形式显示，这个icon就是从后台取过来的小图标的class类名

Answer 5

可以让后台给你一起返回