代碼不循環通過整個JSON數據

Question

$(function() { 
var data; 
$.getJSON("menu.json", function(data){ 
    //console.log(data); 
    //console.log(data.menu); 
    //console.log(data.menu.length); 

    //console.log(data.menu[1].link); 

    //getMenuItem(data); 


    var $menu = $("#menu"); 
    console.log($menu); 
    console.log(this); 
    console.log(data) 
    $.each(data.menu, function() { 
     $menu.append(getMenuItem(data)); 
     //console.log(this); 
    }); 
//  //$menu.menu(); 

    //getMenuItem(data); 

}); 


    function getMenuItem(data) { 


     var i = 0; 

     while(i<data.menu.length){ 

      var item = $("<li>").append($("<a>", 
       { 
        href: '#' + data.menu[i].link, 
        html: data.menu[i].name 
       })); 

      //console.log(data.menu[i]); 


      if (data.sub) { 
       var subList = $("<ul>"); 
       $.each(data.sub, function() { 
        subList.append(getMenuItem(this)); 
    //     //console.log(this); 
    //     //console.log(subList); 
       }); 
       item.append(subList); 
    //    //console.log 
      } 
      i+=1; 
      console.log(i); 
      return item; 

     } 
    } 


     /*optional stuff to do after success */ 

// console.log(data); 
// console.log(jsonD); 
// for(i=0;i<data.menu.length;i++){ 
//  console.log(data.menu[i].sub); 
// } 

}); 

這是我的js（jquery）文件。我試圖從本地的json文件中獲取數據。這是一個多級列表。當我運行代碼時，它不會獲取整個json數據，只會獲取列表中的第一項。誰能幫忙？

而且，這裏是我的JSON文件

{ 
"menu" : [{ 
    "name": "Croatia", 
    "link": "0", 
    "sub": null 
}, { 
    "name": "England", 
    "link": "1", 
    "sub": [{ 
     "name": "Arsenal", 
     "link": "0-0", 
     "sub": null 
    }, { 
     "name": "Liverpool", 
     "link": "0-1", 
     "sub": null 
    }, { 
     "name": "Manchester United", 
     "link": "0-2", 
     "sub": null 
    }] 
}, { 
    "name": "Spain", 
    "link": "2", 
    "sub": [{ 
     "name": "Barcelona", 
     "link": "2-0", 
     "sub": null 
    }, { 
     "name": "Real Madrid", 
     "link": "2-1", 
     "sub": null 
    }] 
}, { 
    "name": "Germany", 
    "link": "3", 
    "sub": [{ 
     "name": "Bayern Munich", 
     "link": "3-1", 
     "sub": null 
    }, { 
     "name": "Borrusia Dortmund", 
     "link": "3-2", 
     "sub": null 
    }] 
}] 
} 

PS #menu是UL，也回答了jQuery，請

Answer 1

在第一each不data陣列getMenuItem()傳遞只是傳遞中的對象實例與遞歸調用getMenuItem(this)

的遞歸調用一樣，然後刪除while()循環

// loop over array 
$.each(data.menu, function(i, item) { 
    // get menu item for each object instance 
    $menu.append(getMenuItem(this)); 
}); 

function getMenuItem(obj) { 
    var item = $("<li>").append($("<a>", { 
    href: '#' + obj.link, 
    html: obj.name 
    })); 

    if (obj.sub) { 
    var subList = $("<ul>"); 
    $.each(obj.sub, function() { 
     subList.append(getMenuItem(this)); 
    }); 
    item.append(subList); 

    } 
    return item; 
} 

DEMO