尝试访问json数组中的嵌套项

Question

​

我有一个取自json文件的javascript对象。问题是我试图访问一个嵌套数组中的项，这个数组的父级称为“菜单”。我需要检索该子菜单对象的id、描述、内容和cssClass。我收到以下错误:无法读取空值的属性‘TypeError’这里是我的代码。

页面的HTML

-------------------------

Javascript对象和Jquery

--------------------------------
//the json code
var object = {
"menuItems":{
"menu":[
  {
     "id":"contact",
     "leaf":true,
     "description":"Contact Us",
     "link":"",
     "content":"contactUs.html",
     "cssClass":"static-content",
     "menu":null
  },
  {
     "id":"rules",
     "leaf":false,
     "description":"Sports Betting Rules",
     "link":"",
     "content":"",
     "cssClass":"",
     "menu":[
        {
           "id":"types",
           "leaf":true,
           "description":"Wager Types",
           "link":"",
           "content":"wagerTypes.html",
           "cssClass":"static-content wager-types",
           "menu":null
        },
        {
           "id":"odds",
           "leaf":true,
           "description":"Odds & Lines",
           "link":"",
           "content":"oddsAndLines.html",
           "cssClass":"static-content",
           "menu":null
        },
        {
           "id":"policies",
           "leaf":true,
           "description":"Rules & Policies",
           "link":"",
           "content":"rulesAndPolicies.html",
           "cssClass":"static-content rules-policies",
           "menu":null
        },
        {
           "id":"bonuses",
           "leaf":true,
           "description":"Sports Bonuses",
           "link":"",
           "content":"sportsBonuses.html",
           "cssClass":"static-content",
           "menu":null
        }
     ]
  },
  {
     "id":"conditions",
     "leaf":false,
     "description":"Terms & Conditions",
     "link":"",
     "content":"",
     "cssClass":"",
     "menu":[
        {
           "id":"termsOfService",
           "leaf":true,
           "description":"Terms of Service",
           "link":"",
           "content":"termsOfService.html",
           "cssClass":"static-content",
           "menu":null
        },
        {
           "id":"privacy",
           "leaf":true,
           "description":"Privacy Policy",
           "link":"",
           "content":"privacy.html",
           "cssClass":"static-content",
           "menu":null
        }
     ]
  },
  {
     "id":"view",
     "leaf":true,
     "description":"View in: Mobile | Full Site",
     "link":"",
     "content":"view.html",
     "cssClass":"static-content",
     "menu":null
   }
   ]
}
};
/*---- end of object----*/   
/*-----javascript functions----*/  
$('#menuItems').append('<ul/>')
$.each(object.menuItems.menu, function() {
    var list = $('#menuItems ul'),
    listItem = $('<li/>');
$.each(this.menu, function() {  
  listItem.append($(this.id).text(this.description).text(this.content).text(this.cssClass).text);
});

list.append(html)
// end of function
});

<!-- end of code -->

有没有人可以帮个忙，因为我在网上找过这个简单的例子，但你在网上永远找不到简单的东西。

Answer 1

你的问题在这里：

listItem.append($(this.id)...

您的json有"id“：”ID“，而要通过视图选择元素，您还需要#签名，因此只需将上面的更改为：

listItem.append($('#' + this.id)...

Answer 2

$('#menuItems').append('<ul/>')
$.each(object.menuItems.menu, function() {
    var list = $('#menuItems ul'),
    listItem = $('<li/>');
// check for null
if (this.menu)
$.each(this.menu, function() {  
  listItem.append($(this.id).text(this.description).text(this.content).text(this.cssClass).text);
});

list.append(html)
// end of function
});

Answer 3

您的问题是您正在尝试访问一个可能为空的菜单项(第一个对象就是这种情况)。您必须在第二个$.each之前测试这种情况，并通过返回true或执行其他操作来继续。

PS :您在这行上也有一个问题：

listItem.append($(this.id).text(this.description).text(this.content).text(this.cssClass).text);

每次调用text函数时，它都会完全替换html元素中的内容

PS2 :另外，最后一个.text将返回jquery文本函数的内容，可能不是您想要的内容……