Question

以下是我的代码：

post.json

[
    {
        "client_id":"100",
        "client_name":"MM Hope House",
        "user_fname":"Betty",
        "user_lname":"Johnson",
        "user_id":"10",
        "username":"bjohnson",
        "total_web":"$500",
        "campaigns":{
            "campaign":[{
                "id":"23",
                "campaign_name":"MM Hope House",
                "start_date":"4/15/2015",
                "end_date":"6/13/2015",
                "goal":"$20,000",
                "total_pledges":"$1550",
                "total_donations":"$1000"
            }],
            "pledgees":[{
                "pledgee_fname":"Tavonia",
                "pledgee_lname":"Evans",
                "pledge_email":"tavonia@gmail.com",
                "pledge_date":"4/22/2015",
                "pledge_amount":"$50.00",
                "paid":"$50.00",
                "last_pledge":"$50.00"
            }],
            "donors":[{
                "donor_fname":"Pat",
                "donor_lname":"Smith",
                "donor_email":"patsmith@onlinemediainteractive.com",
                "total_cdonation":"$10.00",
                "total_ldonation":"$450.00",
                "last_donation":"$200.00",
                "last_pledge":"$350.00"
            }]
        }
    }
]

我的HTML代码：

<script>

    function PostsCtrlAjax($scope, $http) {

        $http({method: 'POST', url: 'assets/js/posts.json'})
            .success(function(data) {
                 console.log(data);
                 $scope.posts = data;
            })
            .error(function(data, status) {
                 $scope.posts = data || "Request failed";
            });
    }

</script>

我想要填充数据的HTML代码：

<thead>


<tr>
    <th>Campaign ID</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Amount</th>
    <th>Email ID.</th>
    <th>Pledge Date</th>
</tr>
</thead>

<tbody>
    <tr ng-repeat="post in posts" >
    <td>{{post.id}}</td>
    <td>{{post.pledgee_fname}}</td>
    <td>{{post.pledgee_lname}}</td>
    <td>{{post.pledge_amount}}</td>
    <td>{{post.pledge_email}}</td>
    <td>{{post.pledge_date}}</td>

我想从数组中获取client_id pleg_fname，但不知道该怎么做。

Answer 1

由于您的帖子对象包含一个元素的数组，因此您应该使用posts[0]来获取第一个（也是唯一一个）元素。此外， pledgees数组位于广告系列对象中，因此posts[0]变为posts[0].compaigns.pledgees。

你应该试试这个：

<tr ng-repeat="post in posts[0].campaigns.pledgees" >
  <td>{{post.id}}</td>
  <td>{{post.pledgee_fname}}</td>
  <td>{{post.pledgee_lname}}</td>
  <td>{{post.pledge_amount}}</td>
  <td>{{post.pledge_email}}</td>
  <td>{{post.pledge_date}}</td>
</tr>

修改

而且，如果您希望campagin对象的 ID 与pledgee项目的索引相同，则必须将track by $index添加到posts[0].campaigns.pledgees。所以它变成了posts[0].campaigns.pledgees track by $index。

因此，现在使用$ index，您可以获得正确的索引，以便在{{posts[0].campaigns.campaign[$index].id}}
的广告系列对象中获得正确的广告系列ID
结果是：

<tr ng-repeat="post in posts[0].campaigns.pledgees track by $index" > <td>{{posts[0].campaigns.campaign[$index].id}}</td> <td>{{post.pledgee_fname}}</td> <td>{{post.pledgee_lname}}</td> <td>{{post.pledge_amount}}</td> <td>{{post.pledge_email}}</td> <td>{{post.pledge_date}}</td> </tr>

您可以在此处查看结果：http://jsfiddle.net/Fieldset/y1asxm61/1/

Answer 2

你的pledgess对象是一个对象数组，所以你应该这样做，而你的整个JSON都包含在一个数组中，所以你需要第一个元素作为你的整个对象，你用{{1然后指定您尝试迭代的对象：posts[0]。

pledgees

修改

你是对的，我完全错过了那个阵列。看到我测试它的那个plunker http://plnkr.co/edit/dvdnjv2mN2gljQGI9Lls?p=preview

修改2

如果您想要广告系列ID，只需添加此内容（使用此更改更新原始代码）

<tr ng-repeat="post in posts[0].campaigns.pledgees" > <td>{{posts[0].campaigns.campaign[0].id}}</td> <td>{{post.pledgee_fname}}</td> <td>{{post.pledgee_lname}}</td> <td>{{post.pledge_amount}}</td> <td>{{post.pledge_email}}</td> <td>{{post.pledge_date}}</td>

使用角度从Json获取数据

2 个答案: