{

   "TimeTable " : "Time Table",

   "formed" : 2018,

   "active" : true,

   "members" : [

     {

       "week" : "Monday",

       "shows" : [

         "《行尸走肉》",

         "《神秘博士》",

         "《国务卿女士》",

           "《末日孤舰》",

               "《辛普森一家》",

             "《名利场》",

         "《堕落街传奇》"

       ]

     },

     {

       "week" : "Tuesday",

       "shows" : [

           "《绝命律师》",

                 "《49号旅舍》",

                 "《与星共舞》",

                 "《驻院医生》",

                 "《紧急呼救》",

                 "《庭审专家》",

                 "《东邻西舍》"

       ]

     },

     {

       "week" : "Wedesday",

       "shows" : [

         "《闪电侠》",

         "《黑霹雳》",

         "《我们这一天》",

         "《人类清除计划》",

         "《天赋异禀》",

         "《联邦调查局》",

         "《医院革命》"

       ]

     },

     {

       "week" : "Thursday",

       "shows" : [

         "《海豹突击队》",

         "《幸存者》",

         "《海豹突击队》",

         "《芝加哥烈焰》",

         "《嘻哈帝国》",

         "《南方公园》",

         "《美恐8：启示录》"

       ]

     },

     {

       "week" : "Friday",

       "shows" : [

         "《邪恶力量》",

         "《生活大爆炸》",

         "《小谢尔顿》",

         "《反恐特警组》",

         "《实习医生格蕾》",

         "《法律与秩序》",

         "《一元背后》"

       ]

     },

     {

       "week" : "Saturday",

       "shows" : [

         "《高堡奇人》",

         "《初来乍到》",

         "《天堂执法者》",

         "《纽约屁民》",

         "《无言有爱》",

         "《地狱厨房》",

         "《凡妮莎海辛》"

       ]

     }

   ]

 }

 var header = document.querySelector('header');

     var section = document.querySelector('section');

     var requestURL = 'https://raw.githubusercontent.com/sherryloslrs/timetable/master/timetable.json';

     var request = new XMLHttpRequest();

     request.open('GET', requestURL);

     request.responseType = 'json';

     request.send();

     request.onload = function() {

       var timetable = request.response;

       populateHeader(timetable);

       showTable(timetable);

     }

     function populateHeader(jsonObj) {

       var myH1 = document.createElement('h1');

       myH1.textContent = "Time  Table";

       header.appendChild(myH1);

       var myPara = document.createElement('p');

       myPara.textContent =  ' // Year: ' + jsonObj['formed'];

       header.appendChild(myPara);

     }

     function showTable(jsonObj) {

       var dramas = jsonObj['members'];

       for(var i = 0; i < dramas.length; i++) {

         var myArticle = document.createElement('article');

         var myH2 = document.createElement('h2');

         var myList = document.createElement('ul');

         myH2.textContent = dramas[i].week;

         var theShows = dramas[i].shows;

         for(var j = 0; j < theShows.length; j++) {

           var listItem = document.createElement('li');

           listItem.textContent = theShows[j];

           myList.appendChild(listItem);

         }

         myArticle.appendChild(myH2);

         myArticle.appendChild(myList);

         section.appendChild(myArticle);

       }

     }

 <!DOCTYPE html>

 <html>

 <head>

     <title>播放时间表</title>

     <meta charset="utf-8">

     <link rel="stylesheet" type="text/css" href="1.css">

     <link rel="stylesheet" type="text/css" href="w3.css">

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <style>

 body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}

 body, html {

     height: 100%;

     line-height: 1.8;

 }

 /* Full height image header */

 .bgimg-1 {

     background-position: center;

     background-size: cover;

     background-image: url("images/main1.png");

     min-height: 100%;

 }

 .w3-bar .w3-button {

     padding: 16px;

 }

 </style>

 <body>

 <div class="w3-top">

   <div class="w3-bar w3-white w3-card" id="myNavbar">

     <a href="index.html" class="w3-bar-item w3-button w3-wide">HOME</a>

     <!-- Right-sided navbar links -->

     <div class="w3-right w3-hide-small">

       <a href="crime.html" class="w3-bar-item w3-button">CRIME</a>

       <a href="fiction.html" class="w3-bar-item w3-button"> FICTION</a>

       <a href="melodrama.html" class="w3-bar-item w3-button"> MELODRAMA</a>

       <a href="emotional.html" class="w3-bar-item w3-button">EMOTIONAL</a>

       <a href="timetable.html" class="w3-bar-item w3-button">TIMETABLE</a>

     </div>

     <!-- Hide right-floated links on small screens and replace them with a menu icon -->

     <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">

       <i class="fa fa-bars"></i>

     </a>

   </div>

 </div>

 <!-- Sidebar on small screens when clicking the menu icon -->

 <nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">

   <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close ×</a>

   <a href="crime.html" onclick="w3_close()" class="w3-bar-item w3-button">CRIME</a>

   <a href="fiction.html" onclick="w3_close()" class="w3-bar-item w3-button">FICTION</a>

   <a href="melodrama.html" onclick="w3_close()" class="w3-bar-item w3-button">MELODRAMA</a>

   <a href="emotional.html" onclick="w3_close()" class="w3-bar-item w3-button">EMOTIONAL</a>

   <a href="timetable.html" onclick="w3_close()" class="w3-bar-item w3-button">TIMETABLE</a>

 </nav>

 <header>

 </header>

 <section>

 </section>

 <script src="timetable.js">

 </script>

 </body>

 </html>