使用Angular将JSon文件解析/绑定到表中答案

【问题标题】：Parsing/binding JSon file into Table using Angular使用Angular将JSon文件解析/绑定到表中
【发布时间】：2015-10-17 20:52:03
【问题描述】：

如何在 Json 下绑定 Place 和 Activity？我确实使用表解析 Event 和 AccountShop 并且它运行。我认为是因为 Place 和 Activiy 中的分隔符？任何人都可以在这里提供帮助或有建议或建议将我从代码中删除。

table.htm

<!DOCTYPE html>
<html ng-app="myTable">
<head>
    <title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script type="text/javascript">
    var myTable=angular.module('myTable',[]);
    myTable.controller('tableCtrl',function($scope,$http){
        $http.get("Table.json").success(function(response){
        $scope.members=response.events;


});

    });
</script>
<style type="text/css">
    table, th, td{
        border: 2px sol grey;
        border-collapse: collapse;
        padding: 4px;
        font-family: arial;

    }

    table tr:nth-child(odd){
        background-color:   #00BFFF;

    }
    table tr:nth-child(even){
        background-color: #808080;
    }

</style>


</head>




<body ng-controller="tableCtrl">
<table border="1">
    <tr>
    <th>Event</th>
    <th>Account Shop</th>
    <th>Place</th>
    <th>Activity</th>
    </tr>

        <tr ng-repeat="member in members">
        <td>{{member.Event.id}}<br>
        {{member.Event.account_id}}<br>
        {{member.Event.shop_id}}<br>


        <td ng-repeat="member in members">
        {{member.AccountShop.id}}<br>
        {{member.AccountShop.name}}<br>
        {{member.AccountShop.short_code}}<br>
        </td>

        <tr ng-repeat="member in members">
        {{member.Place.id}}
        {{member.Place.name}}
        {{member.Place.lk_country_code}}




</table>
</body>
</html>

Table.json

{
    "events": [
        {
            "Event": {
                "id": "59",
                "account_id": "12",
                "shop_id": "12",

            },
            "AccountShop": {
                "id": "1",
                "name": "Sample",
                "short_code": "SampleL"
            },
            "Places": [
                {
                    "id": "537",
                    "name": "Sample",
                    "lk_country_code": "MY"
                }
            ],
            "Activities": [
                {
                    "id": "4011",
                    "short_description": "Sample\r\n"
                },
                {
                    "id": "106",
                    "short_description": "Sample\r\n \r\n"
                },
                {
                    "id": "1027",
                    "short_description": "Sample\r\n"
                }
            ]
        }
    ]
}

【问题讨论】：

你是否从后端控制数据结构？如果是这样，可以通过在每个项目内移动像 Event 这样的属性并制作一个平面对象数组来更好地优化结构......使用像 type:'Event' 这样的公共属性
你能尝试运行它吗 :)，它毁了我，就像我在 3 小时前玩代码解决了 dis lol，然后我搜索其他代码。我认为问题出在 html 文件上，
将此代码放入plunker的演示中。如果需要，会在那里修改一下
@Jerald，你想用内联网格（行扩展网格）显示网格吗？？
@Vijay 是的，类似这样 :) 行扩展网格

标签： angularjs json parsing html-table

【解决方案1】：

 <tr ng-repeat="member in members">
    <td>{{member.Event.id}}</td>
    <td>{{member.Event.account_id}}
    <td>{{member.Event.ishop_id}}
   </td><td>{{member.AccountShop.id}}
   </td> </tr>

您不需要遍历 Event、Account、Place ，因为它们是单个实体。而不是这种迭代成员。所以你可以得到 Event 和它自己的属性，AccountShop 和它的属性等等......

【讨论】：

这真的不是答案，更多的是评论。通过一些额外的解释和代码可以转换为答案
天哪，它成功了！！！！先生你真棒！我只是试着赶上你给的上面的代码，它运行了 ,,:D ,, tnx 这么多！！！
Event 和 AccountShop 是单一的，Place 和 Activity 是集合，所以通过迭代得到最后的 tem。调用 Place -> Places, Activity -> 活动，否则你会陷入混乱。
嗨，我运行此代码并且它可以工作，但我尝试解析 Place，但 JSon 无法绑定它，我认为这是因为该位置上的分隔符“[”，我只绑定 Event 和帐户商店
@ВладимирЛапенков 我已经更改了它，但什么也没发生，但是 Event 和 Accountshop 在一张桌子上运行，Places 和 Activities 不会,,