jquery - 代码未循环遍历整个 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
    }]
}]
}

P.S #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