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

【问题标题】：How to display array of JSON objects in a table如何在表中显示 JSON 对象数组
【发布时间】：2018-02-23 08:42:45
【问题描述】：

我有一个 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

}]

}

请指导我如何编写引导表的代码以实现表内的所有内容。

表格：

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

请多多指教，不胜感激。谢谢

【问题讨论】：

你试过什么？你知道ng-repeat吗？
想要将整个 JSON 原样显示在表格中吗？ “全部”是什么意思？
@Mawg 是的，我知道 ng-repeat，但它多次显示一个数据单元格...
@AnandG 是的，我想要所有信息，我们可能会排除操作和 ID。
ngFor 如果是 Angular，而不是 AngularJS。 Angular 是另一个不同的框架。您需要 ng-repeat，并且需要将 ng-repeat 嵌套在 ng-repeat 中，就像在任何编程语言中嵌套 for 循环以遍历另一个数组中包含的数组一样。显示您尝试过的内容。我们不会做你的功课。

标签： angularjs angular-ui-bootstrap

【解决方案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>

【讨论】：