Question

我有一个从json文件中获取的javascript对象。问题是我在努力访问嵌套数组中的父级别被调用的项目＆＃34; menu＆＃34;。我需要检索此子菜单对象的id，description，content和cssClass。我收到以下错误Uncaught TypeError：无法读取属性＆＃39;长度＆＃39; of null这是我的代码。

页面的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”：“view”，而要按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文本函数的内容，可能不是你想到的......

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

3 个答案: