I need to modify my code to accommodate new json file

I need to modify my code to accommodate new json file

This is my html:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Movie Sounds</title>
  6. <link rel="stylesheet" type="text/css" href="movie.css" />
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  8. <script src="main.js"></script>
  9. </head>
  10. <body>
  11. <div id="main">
  12. <header><h1>Movie sounds</h1></header>
  13. <div id="content">
  14. <div id="sounds">
  15.           <h3><a href="http://jimslounge.com">Movie Waves</a></h3>
  16. <ul id="list"></ul>
  17. </div>
  18. </div>
  19. </body>
  20. </html>
my javascript:
  2. $(document).ready(function() {
  3.   $('#sounds').click(function(e) {
  4.     console.log("got this far");
  5.     e.preventDefault();
  6.     $.getJSON('soundsData.json', function(data) {
  7.     var html = '';
  8.     $.each(data, function(key, val) {
  9.         html += '<li>' + key + '<audio class="sound"><source src="./Miscellaneous/' + val[0] + '" type="audio/ogg"><source src="./Miscellaneous/' + val[1] + '" type="audio/mpeg"></audio></li>';
  10.     $('#list').html(html);
  11.     });
  12.    });
  13.     $('#list').on('click', 'li', function(e) {
  14.     e.stopPropagation();
  15.     $('audio').each(function() { this.pause(); }); //Stop all
  16.       $('audio', this)[0].play(); // Play this one  
  17.     });
  18.   });
  19. });  
my css:
  1. li:hover {
  2. cursor: pointer;
  3. }
  4. li { 
  5. font-size: 1.3em; 
  6. font-weight: bold;
  7. padding: 5px 0;
  8. }
my current json file:
  1. {
  2. "angry cat" : ["angryCat.ogg","angryCat.mp3"],
  3. "anymore" : ["anymore.ogg","anymore.mp3"],
  4. "dark side" : ["darkside.ogg","darkside.mp3"],
  5. "failure to communicate" : ["comm.ogg","comm.mp3"],
  6. "count" : ["count.ogg","count.mp3"],
  7. "doh" : ["doh.ogg","doh.mp3"],
  8. "dumb asshole" : ["dumbasshole.ogg","dumbasshole.mp3"],
  9. "electric" : ["electric.ogg","electric.mp3"],
  10. "Good Bad and Ugly" : ["gbu.ogg","gbu.mp3"],
  11. "gdday" : ["gdday.ogg","gdday.mp3"]
  12. }
the json I want to use:
  1. {
  2. "Miscellaneous" : {
  3. "angry cat" : ["angryCat.ogg","angryCat.mp3"],
  4. "anymore" : ["anymore.ogg","anymore.mp3"],
  5. "dark side" : ["darkside.ogg","darkside.mp3"],
  6. "failure to communicate" : ["comm.ogg","comm.mp3"],
  7. "count" : ["count.ogg","count.mp3"],
  8. "doh" : ["doh.ogg","doh.mp3"],
  9. "dumb asshole" : ["dumbasshole.ogg","dumbasshole.mp3"],
  10. "electric" : ["electric.ogg","electric.mp3"],
  11. "Good Bad and Ugly" : ["gbu.ogg","gbu.mp3"],
  12. "gdday" : ["gdday.ogg","gdday.mp3"]
  13. },
  14. "Napoleon Dynamite" : {
  15. "Bow to your Sensi" : ["bow2sensi.ogg","bow2sensi.mp3"],
  16. "Cage Fighter" : ["cagefighter.ogg","cagefighter.mp3"],
  17. "Neck Meat" : ["neckmeat.ogg","neckmeat.mp3"],
  18. "Skills" : ["skills.ogg","skills.mp3"]
  19. }
  20. }
The json I'm using currently takes data from one folder named  Miscellaneous.
The jason I want to use takes data from two folders  Miscellaneous and  Napoleon Dynamite.
these folders are contained in the movieWaves folder.  All the folders as well as the page files are contained within movieWaves at the same level.  

You can run this here