我想使用angular js将json解析为HTML表 [英] I want to parse json to HTML table using angular js

问题描述

我有这样的JSON。

I Have JSON like This.

var records =  {
 	"grid": [{
 		"rows": [{

 			"id": 204,
      "Status":1,
 			"firstName": "Harsh",
 			"lastName": "Borde",
 			"servername": "aa",
 			"orderNumber": 185,
 			"locationName": null,
 			"orderDetailItems": [{
 				"id": 506,
 				"itemsQty": 1,
 				"itemsShortName": "peg",
 				"pointOfServiceNum": 1,
 				"orderHeaderId": 1

 			}, {
 				"id": 507,
 				"itemsQty": 1.00000,
 				"itemsShortName": "pepsi",
 				"pointOfServiceNum": 1,
 				"orderHeaderId": 1

 			}, {
 				"id": 511,
 				"itemsQty": 1,
 				"itemsShortName": "Glenlevit",
 				"pointOfServiceNum": 1,
 				"orderHeaderId": 1
 			}]
 		}]
 	}]

 }; 

我用循环来迭代这个数据，每页10个表格。

I use for loop for iterate this data in 10 table per page.

var arr = [];
 for(var i=0;i<10;i++)
 {
 arr.push(records);
 }

$scope.records=arr;
for(var j=0;j<10;j++)
{
 console.log(j);
 console.log(arr[j].grid[0].rows[0].orderDetailItems[1].id);
 //console.log(arr[0].grid);
}

我的Html



我尝试了什么：



HTML就像。

my Html

What I have tried:

The HTML is like.

<div class="col-sm-6 col-md-4 col-lg-2">
    <table class="table" cellspacing="0" cellpadding="0">
        <tbody>
            <tr class="loc" colspan="2">
                <td style="text-align: center">{{ row.Location }}</td>
            </tr>
            <tr class="loc" colspan="2">
                <td style="text-align: left; width: 50%">Order No.: {{ row.orderNumber }} </td>
                <td style="text-align: right; width: 50%; padding-right: 21px"> Guest: {{ row.pointOfServiceNum }}</td>
            </tr>
            <tr class="loc" colspan="2">
                <td style="text-align: left; width: 55%">Table No.: {{ row.locationName }}</td>
                <td style="text-align: right; width: 45%; padding-right: 0px">Server: {{ row.serverName }}</td>
            </tr>
            <tr class="heading" style="float: initial"><th>Qty.            Item Name</th></tr>
            <tr class="rowRecord"><td style="width: 0%">{{ row.itemsQty }} </td><td style="width: 74%">{{ row.itemsShortName}}</td></tr>
        </tbody>
        <tfoot>
            <tr>
                <td>{{ row.firstName }}  {{ row.lastName}}</td>
            </tr>
        </tfoot>
    </table>
</div>

我在控制台中获取值但是不在表中。如何在表中显示数据

I am getting values in console but not in table.How is it possible to show data in table

推荐答案

scope.records = arr;
for （ var j = 0 ; j< 10; j ++）
{
console .log（j）;
console .log（arr [j] .grid [ 0 ]。rows [ 0 ]。orderDetailItems [ 1 ]。id）;
// console.log（arr [0] .grid）;
}

scope.records=arr; for(var j=0;j<10;j++) { console.log(j); console.log(arr[j].grid[0].rows[0].orderDetailItems[1].id); //console.log(arr[0].grid); }

我的Html



我尝试了什么：



HTML就像。

my Html

What I have tried:

The HTML is like.

<div class="col-sm-6 col-md-4 col-lg-2">
    <table class="table" cellspacing="0" cellpadding="0">
        <tbody>
            <tr class="loc" colspan="2">
                <td style="text-align: center">{{ row.Location }}</td>
            </tr>
            <tr class="loc" colspan="2">
                <td style="text-align: left; width: 50%">Order No.: {{ row.orderNumber }} </td>
                <td style="text-align: right; width: 50%; padding-right: 21px"> Guest: {{ row.pointOfServiceNum }}</td>
            </tr>
            <tr class="loc" colspan="2">
                <td style="text-align: left; width: 55%">Table No.: {{ row.locationName }}</td>
                <td style="text-align: right; width: 45%; padding-right: 0px">Server: {{ row.serverName }}</td>
            </tr>
            <tr class="heading" style="float: initial"><th>Qty.            Item Name</th></tr>
            <tr class="rowRecord"><td style="width: 0%">{{ row.itemsQty }} </td><td style="width: 74%">{{ row.itemsShortName}}</td></tr>
        </tbody>
        <tfoot>
            <tr>
                <td>{{ row.firstName }}  {{ row.lastName}}</td>
            </tr>
        </tfoot>
    </table>
</div>

我在控制台中获取值但是不在表中。如何在表格中显示数据

I am getting values in console but not in table.How is it possible to show data in table

这篇关于我想使用angular js将json解析为HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！