How can i display nested array JSON data in HTML Table?

Question

I have tried this link http://jsfiddle.net/jlspake/v2L1ny8r/7/ but no any luck.

my ts code is here

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

I have used html table to loop . HTML Code:

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

I want to show nested json data in table. How can it be possible? Please guide some solution. I would really appreciate it. Thanks in advance.

Hi @Binita Doriwala,please read guidelines on how to write a good question on SO. As it stands, this question provides no sample code and no specific question about a technology you're using. — PeonProgrammer
– PeonProgrammer, Commented Dec 17, 2019 at 17:34

GRF · Accepted Answer · 2019-12-17 17:54:55Z

1

You can use *ngFor since you are working with Angular

Check out a good example from Angular documentation.

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

answered Dec 17, 2019 at 17:54

GRF

598 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

elnezah · Accepted Answer · 2019-12-18 08:51:15Z

You should use *ngFor in your html code.

In your whatever.page.ts you need to have your JSON in a global variable with public access. Something like

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

Then in your whatever.page.html do the following:

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

Observe the nested *ngFor: first I load every array from the JSON into a variable table in the ngForlocated in tbody, and then, inside tbody I use this variable table and load into the variable data every entry of the array tabledata.

If it helped you, an upvote would help me.

Collectives™ on Stack Overflow

How can i display nested array JSON data in HTML Table?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related