Итерация через внешний вложенный Json для создания гармонического меню

Question

Моя проблема звучит просто теоретически, но у меня возникли проблемы с правильной работой меню.

Что происходит, так это то, что я могу получить меню, чтобы получить название элемента меню, как я хочу, но я не могу правильно извлечь внутренние элементы и не получить их для отображения справа.

Вот мой Jquery:

$(document).ready(function(){ 


    $.getJSON("externalJson.json", function(data) { 
    postData(data); 
}); 

var html = '<ul>'; 

function postData(data){ 
    /* 
    How I want my menu to work in structure: 

    <ul> 
     <li> 
      <h3><span>Header</span></h3> 
      <ul> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
      </ul> 

     </li> 

    </ul> 
    */ 
    $.each(data, function(key, value){ 
     console.log(data[key].innerItem); 

     html += "<li><h3><span>" + key + "</span></h3>"; 

     $.each(data[key].innerItem, function(i, j){ 
      console.log(j.item); 

      html += "<ul>"; 
      html += "<li><a href=" + j.link + ">" + j.item + "</a></li>"; 
      html += "</ul>"; 

     }); 

     html += "</li>"; 
     html += "</ul>"; 

    }); 

    $('#accordian').append(html); 

}; 


$("#accordian h3").click(function(){ 

    $("#accordian ul ul").slideUp(); 

    if(!$(this).next().is(":visible")){ 
     $(this).next().slideDown(); 

    } 
}); 

}); 

и вот мой JSON-файл, который находится в отдельном файле:

{ 

    "ItemOne": 
    { 
    "innerItem": 
      [{ 
       "item":"cat", 
       "link":"http://www.google.com/" 
      }] 
    }, 

"ItemTwo": 
    { 
     "innerItem": 
      [{ 
       "item":"kitten", 
       "link":"http://www.google.com/" 
      }] 
    }, 

"ItemThree": 
    { 
    "innerItem": 
      [{ 
       "item":"meow", 
       "link":"http://www.google.com/" 
      }] 
    }, 

"ItemFour": 
    { 
     "innerItem": 
      [{ 
       "item":"purr", 
       "link":"http://www.google.com/" 
      }] 
    } 
    } 

Если вы хотите посмотреть на все мой код, вот link: https://ide.c9.io/cherrysymphony/workspace#openfile-README.md

Я не совсем понимаю, что мне нужно сделать, чтобы код работал правильно, как если бы я его жестко проиндексировал в html.

Answer 1

Я не уверен, что понял ваш вопрос, но может ли это быть решением?

$.each(data, function(key, value){ 
 
    console.log(data[key].innerItem); 
 

 
    html += "<li><h3><span>" + key + "</span></h3>"; 
 

 
    html += "<ul>"; 
 
    $.each(data[key].innerItem, function(i, j){ 
 
    console.log(j.item); 
 

 
    html += "<li><a href=" + j.link + ">" + j.item + "</a></li>"; 
 

 
    }); 
 
    html += "</ul>"; 
 

 
    html += "</li>"; 
 
    html += "</ul>"; 
 

 
});