Question

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

2015-10-12

61

javascript json

我有一个从 json 文件中获取的 javascript 对象。问题是我试图访问父级名为“菜单”的嵌套数组中的项目。我需要检索此子菜单对象的 id、描述、内容和 cssClass。我收到以下错误 Uncaught TypeError: 无法读取属性 'length' 为 null 这是我的代码。

页面的 HTML

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

Javascript 对象和 Jquery

--------------------------------
//json 代码
var object = {
"menuItems":{
"menu":[
{
"id":"contact",
"leaf":true,
"description":"联系我们",
"link":"",
"content":"contactUs.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"rules",
"leaf":false,
"description":"体育博彩规则",
"link":"",
"content":"",
"cssClass":"",
"menu":[
{
"id":"types",
"leaf":true,
“description”：“投注类型”，
“link”：“”，
“content”：“wagerTypes.html”，
“cssClass”：“static-content wager-types”，
“menu”：null
}，
{
“id”：“odds”，
“leaf”：true，
“description”：“赔率和线”，
“link”：“”，
“content”：“oddsAndLines.html”，
“cssClass”：“static-content”，
“menu”：null
}，
{
“id”：“policies”，
“leaf”：true，
“description”：“规则和政策",
"link":"",
"content":"rulesAndPolicies.html",
"cssClass":"static-content rules-policies",
"menu":null
},
{
"id":"bonuses",
"leaf":true,
"description":"体育奖金",
"link":"",
"content":"sportsBonuses.html",
"cssClass":"static-content",
"menu":null
}
]
},
{
"id":"conditions",
"leaf":false,
"description":"条款和条件条件",
"link":"",
"content":"",
"cssClass":"",
"menu":[
{
"id":"termsOfService",
"leaf":true,
"description":"服务条款",
"link":"",
"content":"termsOfService.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"privacy",
"leaf":true,
"description":"隐私政策",
"link":"",
"content":"privacy.html",
"cssClass":"static-content",
"menu":null
}
]
},
{
"id":"view",
"leaf":true,
"description":"在移动设备上查看 |完整网站",
"link":"",
"content":"view.html",
"cssClass":"static-content",
"menu":null
}
]
}
};
/*---- 对象结束----*/
/*-----javascript 函数----*/
$('#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)
// 函数结束
});

<!-- 代码结束 -->

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

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 文本函数的内容，可能不是您想要的...