如何在 HTML 表中显示嵌套数组 JSON 数据？

Question

我试过这个链接http://jsfiddle.net/jlspake/v2L1ny8r/7/，但没有任何运气。

我的ts代码在这里

var viewModel = function(data){
  var self = this;
  self.orders = ko.observableArray([
    {
      table_name: 'Table A1 order ID : 001',
      tabledata: [
        { s_no: 1, time: '00:10:00', item_name: 'Carrot Jus', qty: 1, service_type: 'Dine-In', variants: '', ingredients: '', parcel: '', comments: '', status: 'Complete' },
        { s_no: 2, time: '00:10:00', item_name: 'Orange Juice', qty: 1, service_type: 'Takeaway', variants: '', ingredients: '', parcel: '', comments: '', status: 'Complete' },
        { s_no: 1, time: '00:10:00', item_name: 'Carrot Jus', qty: 1, service_type: 'Dine-In', variants: '', ingredients: '', parcel: '', comments: '', status: 'Complete' },
        { s_no: 2, time: '00:10:00', item_name: 'Orange Juice', qty: 1, service_type: 'Takeaway', variants: '', ingredients: '', parcel: '', comments: '', status: 'Complete' }
      ]
    },
    {
      table_name: 'Table A1 order ID : 001',
      tabledata: [
        { s_no: 1, time: '00:10:00', item_name: 'Rice', qty: 1, service_type: 'John', variants: '', ingredients: '', parcel: '', comments: '', status: 'Complete' },
        { s_no: 2, time: '00:15:00', item_name: 'Chicken', qty: 1, service_type: 'John', variants: '', ingredients: '', parcel: '', comments: '', status: 'Complete' }
      ]
    }
  ]);
}

ko.applyBindings(new viewModel(null));

我已经使用 html table 来循环。 HTML 代码：

<table class="table table-hover">
  <thead>
    <tr>
      <th>S NO</th>
      <th>Time</th>
      <th>Item name</th>
      <th>Qty</th>
      <th>Service Type</th>
      <th>Variants</th>
      <th>Ingredients</th>
      <th>Parcel</th>
      <th>Comments</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody id="sortable" data-bind="foreach: orders">
    <tr class="ui-state-default ui-state-disabled">
      <td colspan="3" class="ui-state-default" data-bind="text: table_name"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr data-bind="foreach: tabledata">
      <td class="ui-state-default" data-bind="text: s_no"></td>
      <td class="ui-state-default" data-bind="text: time"></td>
      <td class="ui-state-default" data-bind="text: item_name"></td>
      <td class="ui-state-default" data-bind="text: qty"></td>
      <td class="ui-state-default" data-bind="text: service_type"></td>
      <td class="ui-state-default" data-bind="text: variants"></td>
      <td class="ui-state-default" data-bind="text: ingredients"></td>
      <td class="ui-state-default" data-bind="text: parcel"></td>
      <td class="ui-state-default" data-bind="text: comments"></td>
      <td class="ui-state-default" data-bind="text: status"></td>
    </tr>
 </tbody>
</table>

我想在表格中显示嵌套的 json 数据。怎么可能？请指导一些解决方案。我真的很感激。提前致谢。

Answer 1

您可以使用 *ngFor，因为您正在使用 Angular

从 Angular 文档中查看一个很好的示例。

<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
  {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>

Answer 2

您应该在 html 代码中使用*ngFor。

在您的whatever.page.ts 中，您需要将您的 JSON 放在一个可公开访问的全局变量中。类似的东西

public myJSONDataVariable = [
        {
            table_name: 'Table A1 order ID : 001',
            tabledata: [
                { s_no: 1, time: '00:10:00', item_name: 'Carrot Jus', qty: 1, service_type: 'Dine-In', variants: '', ingredients: '', parcel: '', comments: '', status: 'Complete' },
                { s_no: 2, time: '00:10:00', item_name: 'Orange Juice', qty: 1, service_type: 'Takeaway', variants: '', ingredients: '', parcel: '', comments: '', status: 'Complete' },
                { s_no: 1, time: '00:10:00', item_name: 'Carrot Jus', qty: 1, service_type: 'Dine-In', variants: '', ingredients: '', parcel: '', comments: '', status: 'Complete' },
                { s_no: 2, time: '00:10:00', item_name: 'Orange Juice', qty: 1, service_type: 'Takeaway', variants: '', ingredients: '', parcel: '', comments: '', status: 'Complete' }
            ]
        },
        {
            table_name: 'Table A1 order ID : 001',
            tabledata: [
                { s_no: 1, time: '00:10:00', item_name: 'Rice', qty: 1, service_type: 'John', variants: '', ingredients: '', parcel: '', comments: '', status: 'Complete' },
                { s_no: 2, time: '00:15:00', item_name: 'Chicken', qty: 1, service_type: 'John', variants: '', ingredients: '', parcel: '', comments: '', status: 'Complete' }
            ]
        }
    ];

然后在您的whatever.page.html 中执行以下操作：

    <table class="table table-hover">
        <thead>
        <tr>
            <th>S NO</th>
            <th>Time</th>
            <th>Item name</th>
            <th>Qty</th>
            <th>Service Type</th>
            <th>Variants</th>
            <th>Ingredients</th>
            <th>Parcel</th>
            <th>Comments</th>
            <th>Status</th>
        </tr>
        </thead>
        <tbody id="sortable" *ngFor="let table of myJSONDataVariable">
        <tr class="ui-state-default ui-state-disabled">
            <td colspan="3" class="ui-state-default">{{table.table_name}}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr *ngFor="let data of table.tabledata">
            <td class="ui-state-default">{{data.s_no}}</td>
            <td class="ui-state-default">{{data.time}}</td>
            <td class="ui-state-default">{{data.item_name}}</td>
            <td class="ui-state-default">{{data.qty}}</td>
            <td class="ui-state-default">{{data.service_type}}</td>
            <td class="ui-state-default">{{data.variants}}</td>
            <td class="ui-state-default">{{data.ingredients}}</td>
            <td class="ui-state-default">{{data.parcel}}</td>
            <td class="ui-state-default">{{data.comments}}</td>
            <td class="ui-state-default">{{data.status}}</td>
        </tr>
        </tbody>
    </table>

观察嵌套的*ngFor：首先我将JSON中的每个数组加载到位于ngFor中的table中的变量tbody中，然后在tbody中使用这个变量table和将数组tabledata 的每个条目加载到变量data 中。

如果它对你有帮助，点赞会帮助我。