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

Question

I have a javascript object taken from a json file. The problem is I am trying to access items in a nested array that parent level is called "menu". I need to retrieve the id, description, content and cssClass of this sub menu object. I am getting the following error Uncaught TypeError: Cannot read property 'length' of null Here is my code.

The HTML for page

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

The Javascript Object and 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 -->

Can someone please help with this as I have looked online for the simple example but you can never find simple things online.

Answer 1

Your problem is here:

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

Your json has like "id" : "view", while to select an element by ID you also need # sign, so just change above to:

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

Your problem is that your are trying to access a potentially empty menu item (it's the case in your first object). You must test for that case before your second $.each and either continue by returning true or do something else.

PS : you also have a problem on this line :

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

each time you call the text function, it will replace completly what is in your html element

PS2 : Also, the last .text will return the content of the jquery text function, probably not what you had in mind ...