时间戳

首页 > 解决方案 > 如何使用 ng-repeat 将以下 json 解析为如下复杂的表结构

json - 如何使用 ng-repeat 将以下 json 解析为如下复杂的表结构

问题描述

`

表格图片链接

`我有一个表格结构，如附图所示，我的 json 结构是这样的

我可以将表格形成到位置，但无法访问路由器详细信息，因为我没有获得位置变量的范围

这个 JSON 对我来说看起来很复杂，并且无法根据需要获取用于构建表结构的变量范围。我也尝试在表格内形成表格，但由于内部表格标签结束，因此范围也不可用

请帮我形成表格结构

[
    {
        "regionName": "Australia",
        "locations": [
            {
                "locationname": "sydney",
                "routers": [
                    {
                        "routername": "S1",
                        "installed": "1",
                        "provisioned": "1",
                        "delata": "2",
                        "maximum": "2"
                    },
                    {
                        "routername": "S2",
                        "installed": "1",
                        "provisioned": "2",
                        "delata": "2",
                        "maximum": "2"
                    }
                ]
            },
            {
                "locationname": "Honkong",
                "routers": [
                    {
                        "routername": "H1",
                        "installed": "1",
                        "provisioned": "8",
                        "delata": "6",
                        "maximum": "9"
                    },
                    {
                        "routername": "Hungeri",
                        "installed": "1",
                        "provisioned": "6",
                        "delata": "5",
                        "maximum": "9"
                    }
                ]
            }
        ]
    },
    {
        "regionName": "India",
        "locations": [
            {
                "locationname": "Banglore",
                "routers": [
                    {
                        "routername": "T1",
                        "installed": "1",
                        "provisioned": "9",
                        "delata": "5",
                        "maximum": "4"
                    },
                    {
                        "routername": "T2",
                        "installed": "1",
                        "provisioned": "6",
                        "delata": "5",
                        "maximum": "9"
                    }
                ]
            },
            {
                "locationname": "Mumbai",
                "routers": [
                    {
                        "routername": "M1",
                        "installed": "1",
                        "provisioned": "6",
                        "delata": "6",
                        "maximum": "9"
                    },
                    {
                        "routername": "M2",
                        "installed": "1",
                        "provisioned": "6",
                        "delata": "5",
                        "maximum": "9"
                    }
                ]
            }
        ]
    }
]

这是我尝试过的

 <table>
      <thead>
        <th> Regions </th>
        <th> Location </th>
        <th> Routers </th>
      </thead>
      <tbody ng-repeat="regions in finalJson">
            <tr ng-repeat-start="tempLocation in regions.locations"> </tr>
            <tr>
                <td rowspan=""4>{{regions.regionName}}</td>

                <td rowspan="2">
                    <table>
                        <tbody>
                            <tr ng-repeat-start="location in regions.locations">
                                <td> {{location.locationname}}</td>
                            </tr>
                            <tr ng-repeat-end></tr>
                        </tbody>
                    </table>
                </td>

                <td >
                    <table>
                        <tbody ng-repeat="router in tempLocation.routers">
                            <tr>
                                <td>{{router.routername}}</td>
                            </tr>
                        </tbody>
                    </table>
                </td>

            </tr>

            <tr ng-repeat-end></tr> 
        </tbody>
    </table>

标签： jsonangularjs

解决方案

这里有一个示例plunkr 可以帮助您

<table id="customers">
  <thead>
  </thead>
  <tbody>
    <tr>
      <th> Regions </th>
      <th> Location </th>
      <th> Routers </th>
    </tr>
    <tr ng-repeat="data in dataList">
       <td>{{data.regionName}}</td>
       <td>
        <table>
           <tr ng-repeat="location in data.locations">
             <td>{{location.locationname}}</td>
           </tr>
        </table>
       </td>
       <td>
         <table>
           <tr ng-repeat="location in data.locations">
             <td>
               <table>
                  <tr ng-repeat="route in location.routers">
                    <td>{{route.routername}}</td>
                  </tr>
               </table>
             </td>
           </tr>
        </table>
       </td>
    </tr>

  </tbody>
</table>

只需检查 css 样式，使其看起来与您在代码中看到的相似。也看看是否div可能是一个更好的选择table，这取决于你

推荐阅读