时间戳

首页 > 解决方案 > 提取 JSON 值并打印到 HTML

javascript - 提取 JSON 值并打印到 HTML

问题描述

我创建了一个 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)
        });

  });

标签： javascriptjquery

解决方案

尝试：

$.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);
});

推荐阅读