Как я могу извлечь элементы из данного JSON

Question

я хочу итерацию каждых данных из данного меню JSon JSON является

var jsonMenu = { 

    "menu": [ 
     { 
      "MenuId": "ApplicationId", 
      "MenuName": "Application", 
      "MenuLink": "#", 
      "Submenu": 
       [ 
        { 
         "MenuId": "BasicInformationId", 
         "MenuName": "Basic Information", 
         "MenuLink": "#" 
        } 
       ] 
     }, 

     { 
      "MenuId": "ReviewandSubmissionID", 
      "MenuName": "Review and Submission", 
      "MenuLink": "#" 
     } 

] 
} 

Я использовал данный код для перебора главного меню и он работал

$.each(jsonMenu, function (key3, value3) { 
       $('<li id="' + value3.MenuId + '" class="menu-li"><span><img src="../Images/tab_arrow.png"/></span><a href="' + value3.MenuLink + '">' + value3.MenuName + '</a></li>').appendTo("#menuLeft"); 
}); 

Но как я могу получить подменю из данного json?

Answer 1

Вы должны использовать еще один цикл внутри текущего цикла:

$.each(jsonMenu.menu, function (key, value) { 
    var $li = $('<li id="' + value.MenuId + '" class="menu-li"><span></span><a href="' + value.MenuLink + '">' + value.MenuName + '</a></li>'); 
    if (value.Submenu) { 
     var $ul = $('<ul/>').appendTo($li); 
     $.each(value.Submenu, function (_, v) { 
      $ul.append('<li><a href="#">' + v.MenuName + '</a>...</li>'); 
     }); 
    } 
    $li.appendTo("#menu"); 
}); 

http://jsfiddle.net/7x5En/

Для эффективности вы также можете использовать for петли вместо функции $.each() полезности и для избежания генерирующих вложенных пустых ul элементов (для пустых Подменят массивы) можно проверить наличие Submenu собственности с помощью typeof оператора:

if (typeof value.Submenu !== 'undefined' && value.Submenu.length) { // ... } 

Answer 2

Это работает, чтобы создать иерархию из вашего JSON:

$.each(jsonMenu, function (key3, value3) { 
      $('<li id="' + value3.MenuId + '" class="menu-li"><span><img src="../Images/tab_arrow.png"/></span><a href="' + value3.MenuLink + '">' + value3.MenuName + '</a></li>').appendTo("#menuLeft"); 
      $('<ul></ul>').appendTo("#" + value3.MenuId); 
      $.each(value3, function (key, value) { 
        $('<li id="' + value.MenuId + '" class="menu-li"><span><img src="../Images/tab_arrow.png"/></span><a href="' + value.MenuLink + '">' + value.MenuName + '</a></li>').appendTo("#" + value3.MenuId + ' ul'); 
      }); 
    }); 

Fiddle: http://jsfiddle.net/XVL69/

Answer 3

Честно, вы должны возможно, для этого используется шаблонная структура. Усы довольно простые и легкие. И вы даже можете обрабатывать произвольно глубокие деревья «подменю», рекурсивно ссылаясь на шаблон подменю.

Но, в духе ответа на ваш вопрос напрямую, я хотел бы добавить функцию подменю в родительское меню. И функция для создания ссылок. Знаешь, вместо того, чтобы повторять весь код? Например:

function makeChildren(parentMenu){ 
    var html = $('<ul></ul>'); 
    var children = 'menu' in parentMenu ? 'menu' : 'Submenu'; 
    if (typeof parentMenu[children] === 'undefined' || 
     !parentMenu[children].length) { 
     return html; 
    } 
    $.each(parentMenu[children], function(key, val){ 
     html.append($('<li><span><img alt="use css"/></span></li>') 
      .attr('id', val.MenuId) 
      .addClass('menu-li') 
      .append(makeLink(val)) 
      .append(makeChildren(val)) 
     ); 
    }); 
    return html; 
} 

function makeLink(menu){ 
    return $('<a></a>') 
     .attr('href', menu.MenuLink) 
     .text(menu.MenuName); 
} 

И вот рабочая скрипка, если вы хотите поиграть с ней. Вы в основном называют makeChildren на вашем jsonMenu:

http://jsfiddle.net/VLwjV/