如何在 HTML 表格中显示键值？答案

【问题标题】：How to display key values in HTML table?如何在 HTML 表格中显示键值？
【发布时间】：2019-04-10 17:06:01
【问题描述】：

谁能告诉我如何在 HTML 表格的列中显示星期一、星期二...。我想以表格格式显示整个对象并将其显示在 HTML 页面中。可以做什么？

this.dietplan={
                        "week1": {
                          "Monday": [
                            {
                              "time": "10:00 AM",
                              "diet": "3 eggs",
                              "calories": "150"
                            },
                            {
                              "time": "12:00 PM",
                              "diet": "2 eggs",
                              "calories": "100"
                            }
                          ],
                          "Tuesday": [
                            {
                              "time": "10:00 AM",
                              "diet": "3 eggs",
                              "calories": "150"
                            },
                            {
                              "time": "12:00 PM",
                              "diet": "2 eggs",
                              "calories": "100"
                            }
                          ]
                        }
                      }

【问题讨论】：

你已经尝试了什么？请分享你的尝试。
@J.Knabenschuh 我试过这个 {{diet.key}} 但这是给我第 1 周的输出。
您是否有多个周计划，例如第 1 周和第 2 周等等，如果您想要它应该是什么样子，您是否想将它们显示在同一个表格中
@Anusha_Mamidala 是的，正如你所说，我将有多个星期，每个星期都有周一到周日的日子。
@Anusha_Mamidala ibb.co/KDqfZc4

标签： javascript html json angular typescript

【解决方案1】：

尝试以下方法 - 请参阅 https://stackblitz.com/edit/angular-week-table

html

<table class="table table-hover" [id]="mytable"> 
  <tbody> 
    <ng-container *ngFor="let diet of dietplan | keyvalue"> 
      <tr *ngFor="let day of diet.value | keyvalue | sortWeekday">
        <td>{{day.key}}</td> 
        <ng-container *ngFor="let row of day.value"> 
          <td>{{row.time || string}}<br> {{row.diet || string}}<br> {{row.calories || string}}<br></td>
        </ng-container> 
      </ng-container>
    </tbody>
  </table>

  dietplan={"week1": {
              "Monday": [
                {
                  "time": "10:00 AM",
                  "diet": "3 eggs",
                  "calories": "150"
                },
                {
                  "time": "12:00 PM",
                  "diet": "2 eggs",
                  "calories": "100"
                }
              ],
              "Tuesday": [
                {
                  "time": "10:00 AM",
                  "diet": "3 eggs",
                  "calories": "150"
                },
                {
                  "time": "12:00 PM",
                  "diet": "2 eggs",
                  "calories": "100"
                }
              ]
            }
          };

管道 ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'sortWeekday'})
export class SortWeekdayPipe implements PipeTransform {
  transform(weekdays: any[]): any[] {
    weekdays.sort((a, b) => {
      let sortedWeekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Staurday', 'Sunday'];

      return sortedWeekdays.indexOf(a.key) - sortedWeekdays.indexOf(b.key);
    });
    return weekdays;
  }
}

【讨论】：

这行得通，但对我来说，天的输出不是按顺序排列的。输出：ibb.co/s3TJ0MF
我稍微调整了您的代码：我将您的角度代码调整为：
{{day.key}} {{row.time ||字符串}}
{{row.diet ||字符串}}
{{row.calories ||字符串}}
我用你的调整更新了我的帖子。要获得正确的顺序，您必须对值进行排序。由于您的数据结构，您必须按工作日名称排序。实现这一目标的最简单方法是按工作日名称对您自己的排序管道进行静态排序。
现在我还添加了管道，请参阅我的帖子中的小提琴，我还更新了源代码。希望对你有帮助，如果有请标记帖子
谢谢你，你是生命的救星:)

【解决方案2】：

你可以看到下面的代码从 json 生成表格

var _table_ = document.createElement('table'),
    _tr_ = document.createElement('tr'),
    _th_ = document.createElement('th'),
    _td_ = document.createElement('td');

// Builds the HTML Table out of myList json data from Ivy restful service.
 function buildHtmlTable(arr) {
     var table = _table_.cloneNode(false),
         columns = addAllColumnHeaders(arr, table);
     for (var i=0, maxi=arr.length; i < maxi; ++i) {
         var tr = _tr_.cloneNode(false);
         for (var j=0, maxj=columns.length; j < maxj ; ++j) {
             var td = _td_.cloneNode(false);
                 cellValue = arr[i][columns[j]];
             td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));
             tr.appendChild(td);
         }
         table.appendChild(tr);
     }
     return table;
 }

 // Adds a header row to the table and returns the set of columns.
 // Need to do union of keys from all records as some records may not contain
 // all records
 function addAllColumnHeaders(arr, table)
 {
     var columnSet = [],
         tr = _tr_.cloneNode(false);
     for (var i=0, l=arr.length; i < l; i++) {
         for (var key in arr[i]) {
             if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key)===-1) {
                 columnSet.push(key);
                 var th = _th_.cloneNode(false);
                 th.appendChild(document.createTextNode(key));
                 tr.appendChild(th);
             }
         }
     }
     table.appendChild(tr);
     return columnSet;
 }
var source={
                          "Monday": [
                            {
                              "time": "10:00 AM",
                              "diet": "3 eggs",
                              "calories": "150"
                            },
                            {
                              "time": "12:00 PM",
                              "diet": "2 eggs",
                              "calories": "100"
                            }
                          ],
                          "Tuesday": [
                            {
                              "time": "10:00 AM",
                              "diet": "3 eggs",
                              "calories": "150"
                            },
                            {
                              "time": "12:00 PM",
                              "diet": "2 eggs",
                              "calories": "100"
                            }
                          ]
                        }

document.body.appendChild(buildHtmlTable(source["Monday"]));

查看工作示例here

【讨论】：