使用 javascript 或 jquery 将 JSON 数据解析为表的最佳方法答案

【问题标题】：Best way to parse JSON data into a table using javascript or jquery使用 javascript 或 jquery 将 JSON 数据解析为表的最佳方法
【发布时间】：2015-08-07 01:57:15
【问题描述】：

我有一个存储在数据库中的文档，其中保存了一周的员工日程安排，如下所示：

[ { _id: 55c407dc8ce6dfd4103c15db,
    'Last, First':
     { 'Mon   7/27': '10:15a-8:00p',
       'Wed   7/29': '10:15a-8:00p',
       'Fri   7/31': '10:30a-8:00p' },
    'Doe, John':
     { 'Tue   7/28': '2:00p-11:30p',
       'Thu   7/30': '8:00a-5:30p',
       'Sat   8/1': '10:15a-8:00p' }]

然后在我的主页中加载它：

$(document).ready(function() {
  populateTable();
  ...}

function populateTable() {
$.getJSON('/download/download', function(data) {
 ???
}

get Json 效果很好，可以完美地获取文档。但是，我不确定将信息解析为 html 表的最佳方法。理想情况下，我希望表格如下所示：

              Mon 7/27     Tue 7/28     Wed 7/29     Thu 7/30    Fri 7/31   Sat 8/1   Sun 8/2
Last, First  10:15a-8:00p             10:15a-8:00p
Doe, John                 2:00p-11:30p              8:00a-5:30p          10:15a-8:00p

我想知道在 populateTable() 函数中执行此操作的最佳方法是什么。我正在使用玉作为视图并将表格设置为这样，但想知道附加到它的最佳方法是什么。

div.container
  div.content
    #mainTable
       table.table.table-striped
       thead
         tr
div.footer

谢谢！

【问题讨论】：

你试过什么？什么不工作？只需为每个人创建一行，并将其插入到表中：jQuery Manipulation

标签： javascript jquery html json

【解决方案1】：

就populateTable() 的实现而言，我会执行以下操作：

看看我需要哪些列。可能通过遍历data 中的每个员工，列出他们工作的所有日期。
从空的td 开始创建标题行，然后为每个人工作的日期创建一个th（在步骤1 中创建）
为每个员工创建一行，并每天检查他们在 JSON 中的对象是否具有当天的值。如果他们这样做了，输出一个td和他们的时间，否则输出一个空的td。

这就是我设计populateTable()的总体方案

【讨论】：