角度を使用してJsonからデータを取得します

debugcn 投稿 Dev

Asif Gujjar

以下は私のコードです：

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":"[email protected]",
                "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":"[email protected]",
                "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配列から取得しようとしていますが、方法がわかりません。

エリック・マルティネス

あなたのpledgessオブジェクトは、あなたの代わりにこれを行う必要がありますので、オブジェクトの配列であり、あなたはあなたの全体の対象になります最初の要素を必要とし、あなたがそれを呼び出すように、あなたの全体のJSONは、アレイ内に含まれているposts[0]と、あなたはあなたが繰り返すためにしようとしているオブジェクトを指定します：pledgees。

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

編集

そうです、私はその配列を完全に見逃しました。私がテストしたこのプランカーを参照してくださいhttp://plnkr.co/edit/dvdnjv2mN2gljQGI9Lls?p=preview

編集2

キャンペーンIDが必要な場合は、これを追加するだけです（この変更で元のコードを更新しました）