如何在 table 中显示 JSON 个对象数组

Question

我有一个 JSON 对象数组，我想将其全部显示到一个 table 中，但在某处我弄乱了一些东西。

Problem Statement: Display JSON array of nested objects in a table including all of its contents.

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 的代码来实现 table.

中的所有内容

TABLE:

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

请指教我的误区，感激不尽。谢谢

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

如何在 table 中显示 JSON 个对象数组

How to display array of JSON objects in a table

angularjs

angular-ui-bootstrap