2016-09-08 7 views
1

印刷JSON

{"menu" :[{ 
 
"name": "Computers", 
 
"children": [{ 
 
    "name": "Notebook", 
 
    "children": [{ 
 
    "name": "Apple" 
 
    }, { 
 
    "name": "Windows" 
 
    }] 
 
}, { 
 
    "name": "Tablets", 
 
    "children": [{ 
 
    "name": "Apple" 
 
    }, { 
 
    "name": "Android" 
 
    }, { 
 
    "name": "Windows" 
 
    }] 
 
}] 
 
}, { 
 
"name": "Phones", 
 
"children": [{ 
 
    "name": "Android", 
 
    "children": [{ 
 
    "name": "Samsung" 
 
    }, { 
 
    "name": "Nokia" 
 
    }, { 
 
    "name": "Lenovo" 
 
    }] 
 
}, { 
 
    "name": "Windows Phones", 
 
    "children": [{ 
 
    "name": "Microsoft" 
 
    }, { 
 
    "name": "Nokia" 
 
    }] 
 
}] 
 
}, { 
 
"name": "Cameras", 
 
"children": [{ 
 
    "name": "Digital", 
 
    "children": [{ 
 
    "name": "Nikon" 
 
    }, { 
 
    "name": "Fuji" 
 
    }] 
 
}, { 
 
    "name": "DSLR", 
 
    "children": [{ 
 
    "name": "Canon" 
 
    }, { 
 
    "name": "Nikon" 
 
    }] 
 
}] 
 
}] 
 
}

スマートメニューjqueryのを使用して、私はので、それぞれの親にそれを印刷するには、その子を持っている...ここに私のコードがある

$(document).ready(function() { 
 
      $.ajax({ 
 
       url: 'menuData.json', 
 
       type: 'get', 
 
       dataType: 'json', 
 
       error: function(data){ 
 
       alert("error"); 
 
       }, 
 
       success: function(data){ 
 
     
 
       var i=0; 
 
       var j=0; 
 
       var n=0; 
 
       var obj=data; 
 
       var json = JSON.stringify(obj); 
 
       var s = JSON.parse(json); 
 
       for(i=0;i<s.menu.length;i++){ 
 
      \t $("#main-menu").append(' <li><a href="#">'+ s.menu[i].name +'</a></li>'); 
 
\t    for(j=0;j<s.menu[i].children.length;j++) 
 
\t    { $("#main-menu").append(' <li><a href="#">'+ s.menu[i].children[j].name + '</a></li>'); 
 
\t    for(n=0;n<s.menu[i].children[j].children.length;n++){ 
 
\t    \t 
 
\t    $("#main-menu").append(' <li><a href="#">'+ s.menu[i].children[j].children[n].name +'</a></li>'); 
 
\t    \t 
 
       } 
 
\t    
 
       } 
 
       } 
 

 
       $('#main-menu').smartmenus({ 
 
       \t subMenusSubOffsetX:1, 
 
       \t subMenusSubOffsetY: -8 
 
       \t 
 
       }); 
 
        } 
 
       }); 
 

 
     });

が、それはこのようになります enter image description here

任意のヘルプ...事前のおかげで..ところで私は初心者ですので、おかげで再び

答えて

0

あなたのコードは、あなたが常に$("#main-menu")に追加されている以外、論理的に正しい..です私を助けてくださいしてください。これを行うことを検討してください:

... 

for(var i=0; i < s.menu.length; i++) 
{ 
    $("#main-menu").append(' <li id="menu-list-' + i + '"><a href="#">' + s.menu[i].name + '</a></li>'); 

    var list_length = s.menu[i].children.length; 
    if (list_length > 0) 
     $("#main-menu li#menu-list-" + i).append('<ul></ul>'); 

    for(var j=0; j < list_length; j++) 
    { 
     $("#main-menu li#menu-list-" + i + " ul").append(' <li id="menu-list-' + i + '-children-list-' + j + '"><a href="#">'+ s.menu[i].children[j].name + '</a></li>'); 

     var children_list_length = s.menu[i].children[j].children.length; 
     if(children_list_length > 0) 
      $("#main-menu li#menu-list-" + i + " ul li#menu-list-" + i + "-children-list-" + j).append("<ul></ul>"); 
     for(var n=0; n < children_list_length; n++) 
     { 
      $("#main-menu li#menu-list-" + i + " ul li#menu-list-" + i + "-children-list-" + j + " ul").append(' <li><a href="#">'+ s.menu[i].children[j].children[n].name +'</a></li>'); 
     } 
    } 
} 
...