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.


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

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

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