Javascript 如何在HTML表中显示键值？

有人能告诉我如何在星期一，星期二。。。在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"
                            }
                          ]
                        }
                      }

---

您可以看到下面从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"]));

var\u table\u=document.createElement（'table'），
_tr=document.createElement（'tr'），
_th=document.createElement（'th'），
_td=document.createElement（'td'）；
//从Ivy restful服务的myList json数据构建HTML表。
函数buildHtmlTable（arr）{
变量表=\表\克隆节点（假），
columns=AddAllColumnHeader（arr，表格）；
对于（变量i=0，最大值=arr.length；i

---

请参见工作示例

尝试以下方法-请参见

html

烟斗

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;
  }
}

---

你已经试过什么了？请分享您的尝试。@J.knabenshuh我尝试了这个{diet.key}，但这是作为week1给我输出的。您是否有多周计划，如week1和week2等，如果您想要它的外观，您想在同一个表中显示它们吗like@Anusha_Mamidala是的，我会像你说的那样有好几个星期，每个星期都有星期一到星期天。@Anusha_Mamidala这是可行的，但对我来说，每天的输出不是按顺序来的。输出：我稍微调整了你的代码：我将你的角度代码调整为：{{day.key}{{row.time | | string}}
{{row.diet | | string}
{row.carries | | string}
我用你的调整更新了我的帖子。要获得正确的顺序，必须对值进行排序。由于您的数据结构，您必须按工作日名称进行排序。实现这一点最简单的方法是，按照工作日名称对自己的排序管道进行静态排序。希望对你有所帮助，如果有，请在帖子上注明谢谢，你是生命的救世主：）

  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"
                }
              ]
            }
          };

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;
  }
}