如何在表中显示JSON对象的数组

时间:2018-02-23 08:42:45

标签: angularjs angular-ui-bootstrap

我有一个JSON数组的对象,我想把它全部显示在一个表中,但在某个地方我搞砸了。

  

问题陈述:在表格中显示嵌套对象的JSON数组,包括其所有内容。

JSON数据

{
"loadStops": [{
    "id": 1,
    "sequence": 1,
    "type": "P",
    "stop": {
        "companyId": 148,
        "companyCode": "FWS",
        "legalName": "Frontier WHSE",
        "locations": [{
            "id": 149,
            "city": "PortLavaca",
            "state": "TX",
            "contacts": [{
                "id": 150,
                "medium": "MA",
                "serviceLocator": "000-000-0000",
                "prefered": false,
                "action": 0
            }],
            "action": 0
        }],
        "action": 0
    },
    "apptType": "WDO",
    "appointmentNo": null,
    "commodities": [{
        "id": 0,
        "commodity": "Food",
        "action": 0
    }],
    "action": 0
}, {
    "id": 1,
    "sequence": 1,
    "type": "P",
    "stop": {
        "companyId": 148,
        "companyCode": "FWS",
        "legalName": "Frontier WHSE",
        "locations": [{
            "id": 149,
            "city": "PortLavaca",
            "state": "TX",
            "contacts": [{
                "id": 150,
                "medium": "MA",
                "serviceLocator": "000-000-0000",
                "prefered": false,
                "action": 0
            }],
            "action": 0
        }],
        "action": 0
    },
    "apptType": "WDO",
    "appointmentNo": null,
    "commodities": [{
        "id": 0,
        "commodity": "Food",
        "action": 0
    }],
    "action": 0

}]

}

请指导我如何编写bootstrap表的代码来实现表中的所有内容。

表格

<table class="table table-striped table-hover table-sm">
            <tr>
                <th>headers</th>
            </tr>

            <tr>
                <td> data </td>
                <td>
                    <table>
                        <tr>
                            <td> nested data etc.. </td>
                        </tr>
                    </table>
                </td>
            </tr>


        </table>

请指教我的误会,我会感激你的。 的由于

1 个答案:

答案 0 :(得分:1)

      I am just giivng a sample to iterate over nested data:
      $scope.value= yourJson;
      $spope.displayVal= $scope.value.loadStops;
      <table class="table table-striped table-hover table-sm">
            <tr ng-repeat="data in displayVal">
                <th>{{data.id}}</th>
                <!-- show data what you want-->
            </tr>

            <tr ng-repeat="data in displayVal">
                <td> data </td>
                <td>
                    <table>
                        <tr ng-repeat="newData in data.stop.location">
                            <td> nested data etc.. </td>
                        </tr>
                    </table>
                </td>
            </tr>


        </table>