JSFiddle - React, Tailwind, and code Playground

by Bryan Dellinger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id = "Container"/>

JavaScript

var data=  
  [  
      {  
         "DAY":"MONDAY",
         "LessonName":"SA 1  1",
         "LessonID":"14757",
         "no_of_questions":{  
            "Locked":"11",
            "Unlocked":5
         }
      },
      {  
         "DAY":"MONDAY",
         "LessonName":"SA 1  2",
         "LessonID":"14758",
         "no_of_questions":{  
            "Locked":"11",
            "Unlocked":5
         }
      },
      {  
         "DAY":"TUESDAY",
         "LessonName":"SA 1 3",
         "LessonID":"14759",
         "no_of_questions":{  
            "Locked":"11",
            "Unlocked":5
         }
      },
      {  
         "DAY":"THURSDAY",
         "LessonName":"SA 1 4",
         "LessonID":"14760",
         "no_of_questions":{  
            "Locked":"10",
            "Unlocked":5
         }
      },
      {  
         "DAY":"TUESDAY",
         "LessonName":"SA 2 Part 1",
         "LessonID":"15599",
         "no_of_questions":{  
            "Locked":"11",
            "Unlocked":5
         }
      },
      {  
         "DAY":"WEDNESDAY",
         "LessonName":"SA 2 2",
         "LessonID":"15600",
         "no_of_questions":{  
            "Locked":"11",
            "Unlocked":5
         }
      },
      {  
         "DAY":"WEDNESDAY",
         "LessonName":"2300 SSS",
         "LessonID":"15603",
         "no_of_questions":{  
            "Locked":"26",
            "Unlocked":5
         }
      }
   ];
   
   var DaysofWeek = ['MONDAY','TUESDAY','WEDNESDAY','THURSDAY','FRIDAY','SATURDAY','SUNDAY'];

  $(function() {
     $.each (DaysofWeek, function(index, day){
      $('#Container').append('<h1>'+day+'</h1>');
      	$.each(_.where(data, {DAY: day}), function( index, obj ) {
  			$('#Container').append('<p><strong>Lesson Name: </strong>'+ obj.LessonName + '</p>');
				});
     });
});