Making a Json Call

Making a Json Call

I have a click function that works for one of my anchor tags but I want it to work for two (or more). When I click on the anchor with id get-data-1 it displays the json file microLesson1.json  for the div with class quiz-list-1. I want it to display the json file microLesson2.json when I click on the anchor with id get-data-2 as well.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Test</title>
  6. <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  7. <style>
  8. table.my-new-list {
  9. width: 20%;
  10. }
  11. </style>
  12. </head>

  13. <body>
  14. <a href="#" id="get-data-1">MicroLesson 1</a><br />
  15. <a href="#" id="get-data-2">MicroLesson 2</a>
  16. <div class="quiz-list-1"></div>
  17. <div class="quiz-list-2"></div>
  18. <script>

  19. $(document).ready(function() {
  20. $('#get-data-1').click(function () {
  21.  
  22. $.getJSON( "ajax/microLesson1.json", function( data ) {
  23.   var items = [];
  24.   $.each( data, function( key, val ) {
  25.     items.push( "<tr><td>" + key + "</td><td>" + val + "</td></tr>" );
  26.   });
  27.  
  28.   $( "<table />", {
  29.     "class": "my-new-list",
  30.     html: items.join( "" ),
  31.  }).appendTo( ".quiz-list-1" );
  32. });
  33. });
  34. });
  35. </script>
  36. </body>
  37. </html>

microLesson1.json 

  1. {
  2.   "Quiz 1": "80%",
  3.   "Quiz 2": "100%",
  4.   "Quiz 3": "90%"
  5. }

microLesson2.json
  1. {
  2.   "Quiz 1": "70%",
  3.   "Quiz 2": "50%",
  4.   "Quiz 3": "90%",
  5.   "Quiz 3": "80%",
  6.   "Quiz 3": "60%"
  7. }