提取JSON值并打印到HTML

Question

我创建了一个JSON对象，我的目标是提取值并将其列出为HTML。我正在尝试使用jQuery的.each函数。 JSON对象在下面列出。

 var routeSchedule = {

      "northBoundSaturday" : [
        {
          "station" : "stop 1",
          "times": ["7:16 AM","7:36 AM","7:56 AM","8:16 AM","8:36 AM","8:56 AM","9:16 AM","9:36 AM","9:56 AM","10:16 AM","10:36 AM","10:56 AM","11:16 AM","11:36 AM","11:56 AM","12:16 PM","12:36 PM","12:56 PM","1:16 PM","1:36 PM","1:56 PM","2:16 PM","2:36 PM","2:56 PM","3:16 PM","3:36 PM","3:56 PM","4:16 PM","4:36 PM","4:56 PM","5:16 PM","5:36 PM","5:56 PM","6:16 PM","6:36 PM","6:56 PM","7:16 PM","7:36 PM","7:56 PM","8:16 PM","8:36 PM","8:56 PM","9:16 PM","9:36 PM","9:56 PM","10:16 PM","10:36 PM","10:56 PM","11:16 PM","11:36 PM","11:56 PM"]

        },
        {
          "station": "stop 2",
          "times": ["7:02 AM","7:22 AM","7:42 AM","8:02 AM","8:22 AM","8:42 AM","9:02 AM","9:22 AM","9:42 AM","10:02 AM","10:22 AM","10:42 AM","11:02 AM","11:22 AM","11:42 AM","12:02 PM","12:22 PM","12:42 PM","1:02 PM","1:22 PM","1:42 PM","2:02 PM","2:22 PM","2:42 PM","3:02 PM","3:22 PM","3:42 PM","4:02 PM","4:22 PM","4:42 PM","5:02 PM","5:22 PM","5:42 PM","6:02 PM","6:22 PM","6:42 PM","7:02 PM","7:22 PM","7:42 PM","8:02 PM","8:22 PM","8:42 PM","9:02 PM","9:22 PM","9:42 PM","10:02 PM","10:22 PM","10:42 PM","11:02 PM","11:22 PM","11:42 PM"]

        },
        {
          "station": "stop 3",
          "times": ["7:04 AM","7:24 AM","7:44 AM","8:04 AM","8:24 AM","8:44 AM","9:04 AM","9:24 AM","9:44 AM","10:04 AM","10:24 AM","10:44 AM","11:04 AM","11:24 AM","11:44 AM","12:04 PM","12:24 PM","12:44 PM","1:04 PM","1:24 PM","1:44 PM","2:04 PM","2:24 PM","2:44 PM","3:04 PM","3:24 PM","3:44 PM","4:04 PM","4:24 PM","4:44 PM","5:04 PM","5:24 PM","5:44 PM","6:04 PM","6:24 PM","6:44 PM","7:04 PM","7:24 PM","7:44 PM","8:04 PM","8:24 PM","8:44 PM","9:04 PM","9:24 PM","9:44 PM","10:04 PM","10:24 PM","10:44 PM","11:04 PM","11:24 PM","11:44 PM"]

        }

      ],

      "southBoundSaturday" : [
        {
          "station": "stop 4",
          "times": ["6:59 AM","7:19 AM","7:39 AM","7:59 AM","8:19 AM","8:39 AM","8:59 AM","9:19 AM","9:39 AM","9:59 AM","10:19 AM","10:39 AM","10:59 AM","11:19 AM","11:39 AM","11:59 AM","12:19 PM","12:39 PM","12:59 PM","1:19 PM","1:39 PM","1:59 PM","2:19 PM","2:39 PM","2:59 PM","3:19 PM","3:39 PM","3:59 PM","4:19 PM","4:39 PM","4:59 PM","5:19 PM","5:39 PM","5:59 PM","6:19 PM","6:39 PM","6:59 PM","7:19 PM","7:39 PM","7:59 PM","8:19 PM","8:39 PM","8:59 PM","9:19 PM","9:39 PM","9:59 PM","10:19 PM","10:39 PM","10:59 PM","11:19 PM","11:39 PM"]
          },
          {
          "station": "stop 5",
          "times": ["7:01 AM","7:21 AM","7:41 AM","8:01 AM","8:21 AM","8:41 AM","9:01 AM","9:21 AM","9:41 AM","10:01 AM","10:21 AM","10:41 AM","11:01 AM","11:21 AM","11:41 AM","12:01 PM","12:21 PM","12:41 PM","1:01 PM","1:21 PM","1:41 PM","2:01 PM","2:21 PM","2:41 PM","3:01 PM","3:21 PM","3:41 PM","4:01 PM","4:21 PM","4:41 PM","5:01 PM","5:21 PM","5:41 PM","6:01 PM","6:21 PM","6:41 PM","7:01 PM","7:21 PM","7:41 PM","8:01 PM","8:21 PM","8:41 PM","9:01 PM","9:21 PM","9:41 PM","10:01 PM","10:21 PM","10:41 PM","11:01 PM","11:21 PM","11:41 PM"]

        },
        {
          "station": "stop 6",
          "times": ["7:03 AM","7:23 AM","7:43 AM","8:03 AM","8:23 AM","8:43 AM","9:03 AM","9:23 AM","9:43 AM","10:03 AM","10:23 AM","10:43 AM","11:03 AM","11:23 AM","11:43 AM","12:03 PM","12:23 PM","12:43 PM","1:03 PM","1:23 PM","1:43 PM","2:03 PM","2:23 PM","2:43 PM","3:03 PM","3:23 PM","3:43 PM","4:03 PM","4:23 PM","4:43 PM","5:03 PM","5:23 PM","5:43 PM","6:03 PM","6:23 PM","6:43 PM","7:03 PM","7:23 PM","7:43 PM","8:03 PM","8:23 PM","8:43 PM","9:03 PM","9:23 PM","9:43 PM","10:03 PM","10:23 PM","10:43 PM","11:03 PM","11:23 PM","11:43 PM"]

        },
        {
          "station": "stop 7",
          "times": ["7:04 AM","7:24 AM","7:44 AM","8:04 AM","8:24 AM","8:44 AM","9:04 AM","9:24 AM","9:44 AM","10:04 AM","10:24 AM","10:44 AM","11:04 AM","11:24 AM","11:44 AM","12:04 PM","12:24 PM","12:44 PM","1:04 PM","1:24 PM","1:44 PM","2:04 PM","2:24 PM","2:44 PM","3:04 PM","3:24 PM","3:44 PM","4:04 PM","4:24 PM","4:44 PM","5:04 PM","5:24 PM","5:44 PM","6:04 PM","6:24 PM","6:44 PM","7:04 PM","7:24 PM","7:44 PM","8:04 PM","8:24 PM","8:44 PM","9:04 PM","9:24 PM","9:44 PM","10:04 PM","10:24 PM","10:44 PM","11:04 PM","11:24 PM","11:44 PM"]

        }
      ]
    }

下面列出了HTML块，这只是一个参考，我需要始终在列表项中列出所有内容，但是我唯一的问题是要从JSON对象中获取数据。

<div>
  <h1>Route Schedules</h1>

  <div class="northbound">
    <h2>{Stop 1}</h2>
    <h3>Times</h3>
    <ul>
      <li>5:18</li>
      <li>5:18</li>
      <li>5:18</li>
      <li>5:18</li>
    </ul>
  </div>

  <div class="southbound">
    <h2>{Stop 2}</h2>
    <h3>Times</h3>
    <ul>
      <li>5:18</li>
      <li>5:18</li>
      <li>5:18</li>
      <li>5:18</li>
    </ul>
  </div>

</div>

我被困的地方：

 $.each(routeSchedule.southBoundWeekday, function(key, value) {

        $.each(value[times], function(time) {
            console.log(time)
        });

  });

Answer 1

尝试：

$.each(routeSchedule.southBoundSaturday, function (indx, rowElement) {
  var container = $("<div class=\"southBoundSaturday\"></div>");
  var title = $("<h2></h2>");
  title.html(rowElement.station);

  var subtitle = $("<h3>Times</h3>");
  var $ul = $("<ul></ul>");

  $.each(rowElement.times, function (i, rowTimes) {
    var li = $("<li></li>");
    li.html(rowTimes);

    $ul.append(li);
  });

  container.append(title);
  container.append(subtitle);
  container.append($ul);
});

Answer 2

您的JSON中没有southBoundWeekday键，因此您需要在键value["times"]周围加上引号，否则解释器会认为这是一个变量。另外，您试图在第二个.each中打印索引。尝试以下方法：

var routeSchedule = {

      "northBoundSaturday" : [
        {
          "station" : "stop 1",
          "times": ["7:16 AM","7:36 AM","7:56 AM","8:16 AM","8:36 AM","8:56 AM","9:16 AM","9:36 AM","9:56 AM","10:16 AM","10:36 AM","10:56 AM","11:16 AM","11:36 AM","11:56 AM","12:16 PM","12:36 PM","12:56 PM","1:16 PM","1:36 PM","1:56 PM","2:16 PM","2:36 PM","2:56 PM","3:16 PM","3:36 PM","3:56 PM","4:16 PM","4:36 PM","4:56 PM","5:16 PM","5:36 PM","5:56 PM","6:16 PM","6:36 PM","6:56 PM","7:16 PM","7:36 PM","7:56 PM","8:16 PM","8:36 PM","8:56 PM","9:16 PM","9:36 PM","9:56 PM","10:16 PM","10:36 PM","10:56 PM","11:16 PM","11:36 PM","11:56 PM"]

        },
        {
          "station": "stop 2",
          "times": ["7:02 AM","7:22 AM","7:42 AM","8:02 AM","8:22 AM","8:42 AM","9:02 AM","9:22 AM","9:42 AM","10:02 AM","10:22 AM","10:42 AM","11:02 AM","11:22 AM","11:42 AM","12:02 PM","12:22 PM","12:42 PM","1:02 PM","1:22 PM","1:42 PM","2:02 PM","2:22 PM","2:42 PM","3:02 PM","3:22 PM","3:42 PM","4:02 PM","4:22 PM","4:42 PM","5:02 PM","5:22 PM","5:42 PM","6:02 PM","6:22 PM","6:42 PM","7:02 PM","7:22 PM","7:42 PM","8:02 PM","8:22 PM","8:42 PM","9:02 PM","9:22 PM","9:42 PM","10:02 PM","10:22 PM","10:42 PM","11:02 PM","11:22 PM","11:42 PM"]

        },
        {
          "station": "stop 3",
          "times": ["7:04 AM","7:24 AM","7:44 AM","8:04 AM","8:24 AM","8:44 AM","9:04 AM","9:24 AM","9:44 AM","10:04 AM","10:24 AM","10:44 AM","11:04 AM","11:24 AM","11:44 AM","12:04 PM","12:24 PM","12:44 PM","1:04 PM","1:24 PM","1:44 PM","2:04 PM","2:24 PM","2:44 PM","3:04 PM","3:24 PM","3:44 PM","4:04 PM","4:24 PM","4:44 PM","5:04 PM","5:24 PM","5:44 PM","6:04 PM","6:24 PM","6:44 PM","7:04 PM","7:24 PM","7:44 PM","8:04 PM","8:24 PM","8:44 PM","9:04 PM","9:24 PM","9:44 PM","10:04 PM","10:24 PM","10:44 PM","11:04 PM","11:24 PM","11:44 PM"]

        }

      ],

      "southBoundSaturday" : [
        {
          "station": "stop 4",
          "times": ["6:59 AM","7:19 AM","7:39 AM","7:59 AM","8:19 AM","8:39 AM","8:59 AM","9:19 AM","9:39 AM","9:59 AM","10:19 AM","10:39 AM","10:59 AM","11:19 AM","11:39 AM","11:59 AM","12:19 PM","12:39 PM","12:59 PM","1:19 PM","1:39 PM","1:59 PM","2:19 PM","2:39 PM","2:59 PM","3:19 PM","3:39 PM","3:59 PM","4:19 PM","4:39 PM","4:59 PM","5:19 PM","5:39 PM","5:59 PM","6:19 PM","6:39 PM","6:59 PM","7:19 PM","7:39 PM","7:59 PM","8:19 PM","8:39 PM","8:59 PM","9:19 PM","9:39 PM","9:59 PM","10:19 PM","10:39 PM","10:59 PM","11:19 PM","11:39 PM"]
          },
          {
          "station": "stop 5",
          "times": ["7:01 AM","7:21 AM","7:41 AM","8:01 AM","8:21 AM","8:41 AM","9:01 AM","9:21 AM","9:41 AM","10:01 AM","10:21 AM","10:41 AM","11:01 AM","11:21 AM","11:41 AM","12:01 PM","12:21 PM","12:41 PM","1:01 PM","1:21 PM","1:41 PM","2:01 PM","2:21 PM","2:41 PM","3:01 PM","3:21 PM","3:41 PM","4:01 PM","4:21 PM","4:41 PM","5:01 PM","5:21 PM","5:41 PM","6:01 PM","6:21 PM","6:41 PM","7:01 PM","7:21 PM","7:41 PM","8:01 PM","8:21 PM","8:41 PM","9:01 PM","9:21 PM","9:41 PM","10:01 PM","10:21 PM","10:41 PM","11:01 PM","11:21 PM","11:41 PM"]

        },
        {
          "station": "stop 6",
          "times": ["7:03 AM","7:23 AM","7:43 AM","8:03 AM","8:23 AM","8:43 AM","9:03 AM","9:23 AM","9:43 AM","10:03 AM","10:23 AM","10:43 AM","11:03 AM","11:23 AM","11:43 AM","12:03 PM","12:23 PM","12:43 PM","1:03 PM","1:23 PM","1:43 PM","2:03 PM","2:23 PM","2:43 PM","3:03 PM","3:23 PM","3:43 PM","4:03 PM","4:23 PM","4:43 PM","5:03 PM","5:23 PM","5:43 PM","6:03 PM","6:23 PM","6:43 PM","7:03 PM","7:23 PM","7:43 PM","8:03 PM","8:23 PM","8:43 PM","9:03 PM","9:23 PM","9:43 PM","10:03 PM","10:23 PM","10:43 PM","11:03 PM","11:23 PM","11:43 PM"]

        },
        {
          "station": "stop 7",
          "times": ["7:04 AM","7:24 AM","7:44 AM","8:04 AM","8:24 AM","8:44 AM","9:04 AM","9:24 AM","9:44 AM","10:04 AM","10:24 AM","10:44 AM","11:04 AM","11:24 AM","11:44 AM","12:04 PM","12:24 PM","12:44 PM","1:04 PM","1:24 PM","1:44 PM","2:04 PM","2:24 PM","2:44 PM","3:04 PM","3:24 PM","3:44 PM","4:04 PM","4:24 PM","4:44 PM","5:04 PM","5:24 PM","5:44 PM","6:04 PM","6:24 PM","6:44 PM","7:04 PM","7:24 PM","7:44 PM","8:04 PM","8:24 PM","8:44 PM","9:04 PM","9:24 PM","9:44 PM","10:04 PM","10:24 PM","10:44 PM","11:04 PM","11:24 PM","11:44 PM"]

        }
      ]
    }


$.each(routeSchedule.southBoundSaturday, function(key, value) {
  $.each(value["times"], function(index, time) {
    console.log(time)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

将数据添加到HTML有点复杂。最好创建一个文档片段，然后将所有片段添加到其中，然后再附加到DOM。您也可以使用把手或胡须之类的模板，但这是JS方式。

var routeSchedule = {

      "northBoundSaturday" : [
        {
          "station" : "stop 1",
          "times": ["7:16 AM","7:36 AM","7:56 AM","8:16 AM","8:36 AM","8:56 AM","9:16 AM","9:36 AM","9:56 AM","10:16 AM","10:36 AM","10:56 AM","11:16 AM","11:36 AM","11:56 AM","12:16 PM","12:36 PM","12:56 PM","1:16 PM","1:36 PM","1:56 PM","2:16 PM","2:36 PM","2:56 PM","3:16 PM","3:36 PM","3:56 PM","4:16 PM","4:36 PM","4:56 PM","5:16 PM","5:36 PM","5:56 PM","6:16 PM","6:36 PM","6:56 PM","7:16 PM","7:36 PM","7:56 PM","8:16 PM","8:36 PM","8:56 PM","9:16 PM","9:36 PM","9:56 PM","10:16 PM","10:36 PM","10:56 PM","11:16 PM","11:36 PM","11:56 PM"]

        },
        {
          "station": "stop 2",
          "times": ["7:02 AM","7:22 AM","7:42 AM","8:02 AM","8:22 AM","8:42 AM","9:02 AM","9:22 AM","9:42 AM","10:02 AM","10:22 AM","10:42 AM","11:02 AM","11:22 AM","11:42 AM","12:02 PM","12:22 PM","12:42 PM","1:02 PM","1:22 PM","1:42 PM","2:02 PM","2:22 PM","2:42 PM","3:02 PM","3:22 PM","3:42 PM","4:02 PM","4:22 PM","4:42 PM","5:02 PM","5:22 PM","5:42 PM","6:02 PM","6:22 PM","6:42 PM","7:02 PM","7:22 PM","7:42 PM","8:02 PM","8:22 PM","8:42 PM","9:02 PM","9:22 PM","9:42 PM","10:02 PM","10:22 PM","10:42 PM","11:02 PM","11:22 PM","11:42 PM"]

        },
        {
          "station": "stop 3",
          "times": ["7:04 AM","7:24 AM","7:44 AM","8:04 AM","8:24 AM","8:44 AM","9:04 AM","9:24 AM","9:44 AM","10:04 AM","10:24 AM","10:44 AM","11:04 AM","11:24 AM","11:44 AM","12:04 PM","12:24 PM","12:44 PM","1:04 PM","1:24 PM","1:44 PM","2:04 PM","2:24 PM","2:44 PM","3:04 PM","3:24 PM","3:44 PM","4:04 PM","4:24 PM","4:44 PM","5:04 PM","5:24 PM","5:44 PM","6:04 PM","6:24 PM","6:44 PM","7:04 PM","7:24 PM","7:44 PM","8:04 PM","8:24 PM","8:44 PM","9:04 PM","9:24 PM","9:44 PM","10:04 PM","10:24 PM","10:44 PM","11:04 PM","11:24 PM","11:44 PM"]

        }

      ],

      "southBoundSaturday" : [
        {
          "station": "stop 4",
          "times": ["6:59 AM","7:19 AM","7:39 AM","7:59 AM","8:19 AM","8:39 AM","8:59 AM","9:19 AM","9:39 AM","9:59 AM","10:19 AM","10:39 AM","10:59 AM","11:19 AM","11:39 AM","11:59 AM","12:19 PM","12:39 PM","12:59 PM","1:19 PM","1:39 PM","1:59 PM","2:19 PM","2:39 PM","2:59 PM","3:19 PM","3:39 PM","3:59 PM","4:19 PM","4:39 PM","4:59 PM","5:19 PM","5:39 PM","5:59 PM","6:19 PM","6:39 PM","6:59 PM","7:19 PM","7:39 PM","7:59 PM","8:19 PM","8:39 PM","8:59 PM","9:19 PM","9:39 PM","9:59 PM","10:19 PM","10:39 PM","10:59 PM","11:19 PM","11:39 PM"]
          },
          {
          "station": "stop 5",
          "times": ["7:01 AM","7:21 AM","7:41 AM","8:01 AM","8:21 AM","8:41 AM","9:01 AM","9:21 AM","9:41 AM","10:01 AM","10:21 AM","10:41 AM","11:01 AM","11:21 AM","11:41 AM","12:01 PM","12:21 PM","12:41 PM","1:01 PM","1:21 PM","1:41 PM","2:01 PM","2:21 PM","2:41 PM","3:01 PM","3:21 PM","3:41 PM","4:01 PM","4:21 PM","4:41 PM","5:01 PM","5:21 PM","5:41 PM","6:01 PM","6:21 PM","6:41 PM","7:01 PM","7:21 PM","7:41 PM","8:01 PM","8:21 PM","8:41 PM","9:01 PM","9:21 PM","9:41 PM","10:01 PM","10:21 PM","10:41 PM","11:01 PM","11:21 PM","11:41 PM"]

        },
        {
          "station": "stop 6",
          "times": ["7:03 AM","7:23 AM","7:43 AM","8:03 AM","8:23 AM","8:43 AM","9:03 AM","9:23 AM","9:43 AM","10:03 AM","10:23 AM","10:43 AM","11:03 AM","11:23 AM","11:43 AM","12:03 PM","12:23 PM","12:43 PM","1:03 PM","1:23 PM","1:43 PM","2:03 PM","2:23 PM","2:43 PM","3:03 PM","3:23 PM","3:43 PM","4:03 PM","4:23 PM","4:43 PM","5:03 PM","5:23 PM","5:43 PM","6:03 PM","6:23 PM","6:43 PM","7:03 PM","7:23 PM","7:43 PM","8:03 PM","8:23 PM","8:43 PM","9:03 PM","9:23 PM","9:43 PM","10:03 PM","10:23 PM","10:43 PM","11:03 PM","11:23 PM","11:43 PM"]

        },
        {
          "station": "stop 7",
          "times": ["7:04 AM","7:24 AM","7:44 AM","8:04 AM","8:24 AM","8:44 AM","9:04 AM","9:24 AM","9:44 AM","10:04 AM","10:24 AM","10:44 AM","11:04 AM","11:24 AM","11:44 AM","12:04 PM","12:24 PM","12:44 PM","1:04 PM","1:24 PM","1:44 PM","2:04 PM","2:24 PM","2:44 PM","3:04 PM","3:24 PM","3:44 PM","4:04 PM","4:24 PM","4:44 PM","5:04 PM","5:24 PM","5:44 PM","6:04 PM","6:24 PM","6:44 PM","7:04 PM","7:24 PM","7:44 PM","8:04 PM","8:24 PM","8:44 PM","9:04 PM","9:24 PM","9:44 PM","10:04 PM","10:24 PM","10:44 PM","11:04 PM","11:24 PM","11:44 PM"]

        }
      ]
    }
    
function createList(className, station) {
  var newNode = document.createDocumentFragment();
  var parentDiv = document.createElement("div");
  parentDiv.className = className;
  
  station.forEach(function(stop){
    parentDiv.append(createStop(stop.station, stop.times));
  });
  
  newNode.append(parentDiv);
  return newNode;
}

function createStop(stop, times){
  var newNode = document.createDocumentFragment();
  var header = document.createElement("h2");
  var timesLabel = document.createElement("h3");
  var uList = document.createElement("ul");

  header.textContent = stop;
  timesLabel.textContent = "Times";

  times.forEach(function(time) {
    var listItem = document.createElement("li");
    listItem.textContent = time;
    uList.append(listItem);
  });
  
  newNode.append(header);
  newNode.append(timesLabel);
  newNode.append(uList);
  
  return newNode;
}

var container = $("#container");

Object.keys(routeSchedule).forEach(function(value) {
  var className = value.replace(/Saturday|Sunday|Weekday/g, "").toLowerCase()
  var newNode = createList(className, routeSchedule[value]);
  
  container.append(newNode);
});

.southbound {
  background: green;
}
.northbound {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <h1>Route Schedules</h1>
</div>

Answer 3

您可以在没有JQuery的情况下做到这一点：

var routeSchedule = {

      "northBoundSaturday" : [
        {
          "station" : "stop 1",
          "times": ["7:16 AM","7:36 AM","7:56 AM","8:16 AM","8:36 AM","8:56 AM","9:16 AM","9:36 AM","9:56 AM","10:16 AM","10:36 AM","10:56 AM","11:16 AM","11:36 AM","11:56 AM","12:16 PM","12:36 PM","12:56 PM","1:16 PM","1:36 PM","1:56 PM","2:16 PM","2:36 PM","2:56 PM","3:16 PM","3:36 PM","3:56 PM","4:16 PM","4:36 PM","4:56 PM","5:16 PM","5:36 PM","5:56 PM","6:16 PM","6:36 PM","6:56 PM","7:16 PM","7:36 PM","7:56 PM","8:16 PM","8:36 PM","8:56 PM","9:16 PM","9:36 PM","9:56 PM","10:16 PM","10:36 PM","10:56 PM","11:16 PM","11:36 PM","11:56 PM"]

        },
        {
          "station": "stop 2",
          "times": ["7:02 AM","7:22 AM","7:42 AM","8:02 AM","8:22 AM","8:42 AM","9:02 AM","9:22 AM","9:42 AM","10:02 AM","10:22 AM","10:42 AM","11:02 AM","11:22 AM","11:42 AM","12:02 PM","12:22 PM","12:42 PM","1:02 PM","1:22 PM","1:42 PM","2:02 PM","2:22 PM","2:42 PM","3:02 PM","3:22 PM","3:42 PM","4:02 PM","4:22 PM","4:42 PM","5:02 PM","5:22 PM","5:42 PM","6:02 PM","6:22 PM","6:42 PM","7:02 PM","7:22 PM","7:42 PM","8:02 PM","8:22 PM","8:42 PM","9:02 PM","9:22 PM","9:42 PM","10:02 PM","10:22 PM","10:42 PM","11:02 PM","11:22 PM","11:42 PM"]

        },
        {
          "station": "stop 3",
          "times": ["7:04 AM","7:24 AM","7:44 AM","8:04 AM","8:24 AM","8:44 AM","9:04 AM","9:24 AM","9:44 AM","10:04 AM","10:24 AM","10:44 AM","11:04 AM","11:24 AM","11:44 AM","12:04 PM","12:24 PM","12:44 PM","1:04 PM","1:24 PM","1:44 PM","2:04 PM","2:24 PM","2:44 PM","3:04 PM","3:24 PM","3:44 PM","4:04 PM","4:24 PM","4:44 PM","5:04 PM","5:24 PM","5:44 PM","6:04 PM","6:24 PM","6:44 PM","7:04 PM","7:24 PM","7:44 PM","8:04 PM","8:24 PM","8:44 PM","9:04 PM","9:24 PM","9:44 PM","10:04 PM","10:24 PM","10:44 PM","11:04 PM","11:24 PM","11:44 PM"]

        }

      ],

      "southBoundSaturday" : [
        {
          "station": "stop 4",
          "times": ["6:59 AM","7:19 AM","7:39 AM","7:59 AM","8:19 AM","8:39 AM","8:59 AM","9:19 AM","9:39 AM","9:59 AM","10:19 AM","10:39 AM","10:59 AM","11:19 AM","11:39 AM","11:59 AM","12:19 PM","12:39 PM","12:59 PM","1:19 PM","1:39 PM","1:59 PM","2:19 PM","2:39 PM","2:59 PM","3:19 PM","3:39 PM","3:59 PM","4:19 PM","4:39 PM","4:59 PM","5:19 PM","5:39 PM","5:59 PM","6:19 PM","6:39 PM","6:59 PM","7:19 PM","7:39 PM","7:59 PM","8:19 PM","8:39 PM","8:59 PM","9:19 PM","9:39 PM","9:59 PM","10:19 PM","10:39 PM","10:59 PM","11:19 PM","11:39 PM"]
          },
          {
          "station": "stop 5",
          "times": ["7:01 AM","7:21 AM","7:41 AM","8:01 AM","8:21 AM","8:41 AM","9:01 AM","9:21 AM","9:41 AM","10:01 AM","10:21 AM","10:41 AM","11:01 AM","11:21 AM","11:41 AM","12:01 PM","12:21 PM","12:41 PM","1:01 PM","1:21 PM","1:41 PM","2:01 PM","2:21 PM","2:41 PM","3:01 PM","3:21 PM","3:41 PM","4:01 PM","4:21 PM","4:41 PM","5:01 PM","5:21 PM","5:41 PM","6:01 PM","6:21 PM","6:41 PM","7:01 PM","7:21 PM","7:41 PM","8:01 PM","8:21 PM","8:41 PM","9:01 PM","9:21 PM","9:41 PM","10:01 PM","10:21 PM","10:41 PM","11:01 PM","11:21 PM","11:41 PM"]

        },
        {
          "station": "stop 6",
          "times": ["7:03 AM","7:23 AM","7:43 AM","8:03 AM","8:23 AM","8:43 AM","9:03 AM","9:23 AM","9:43 AM","10:03 AM","10:23 AM","10:43 AM","11:03 AM","11:23 AM","11:43 AM","12:03 PM","12:23 PM","12:43 PM","1:03 PM","1:23 PM","1:43 PM","2:03 PM","2:23 PM","2:43 PM","3:03 PM","3:23 PM","3:43 PM","4:03 PM","4:23 PM","4:43 PM","5:03 PM","5:23 PM","5:43 PM","6:03 PM","6:23 PM","6:43 PM","7:03 PM","7:23 PM","7:43 PM","8:03 PM","8:23 PM","8:43 PM","9:03 PM","9:23 PM","9:43 PM","10:03 PM","10:23 PM","10:43 PM","11:03 PM","11:23 PM","11:43 PM"]

        },
        {
          "station": "stop 7",
          "times": ["7:04 AM","7:24 AM","7:44 AM","8:04 AM","8:24 AM","8:44 AM","9:04 AM","9:24 AM","9:44 AM","10:04 AM","10:24 AM","10:44 AM","11:04 AM","11:24 AM","11:44 AM","12:04 PM","12:24 PM","12:44 PM","1:04 PM","1:24 PM","1:44 PM","2:04 PM","2:24 PM","2:44 PM","3:04 PM","3:24 PM","3:44 PM","4:04 PM","4:24 PM","4:44 PM","5:04 PM","5:24 PM","5:44 PM","6:04 PM","6:24 PM","6:44 PM","7:04 PM","7:24 PM","7:44 PM","8:04 PM","8:24 PM","8:44 PM","9:04 PM","9:24 PM","9:44 PM","10:04 PM","10:24 PM","10:44 PM","11:04 PM","11:24 PM","11:44 PM"]

        }
      ]
    }

Object.entries(routeSchedule).forEach(([key, value]) => {
	let result = `
		<div class="${key}">
            ${value.map(stop => {
			    return `
                    <h2>{${stop.station}}</h2>
                    <h3>Times</h3>
                    <ul>
                      ${stop.times.map(time => {
                            return `<li>${time}</li>`
                        }).join('')}
                    </ul>
			`
		}).join('')}
      </div>
	`

  document.querySelector("#result").innerHTML = result;
})

<div id="result"></div>