Получить данные из Json с использованием углового

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

Ваш объект pledgess - это массив объектов, поэтому вы должны сделать это вместо этого, и весь ваш JSON содержится внутри массива, поэтому вам нужен первый элемент, который будет вашим полным ob ject, и вы вызываете его с помощью 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> 

Редактировать

Вы правы, я полностью пропустил этот массив. Смотрите эту plunker где я тестировал http://plnkr.co/edit/dvdnjv2mN2gljQGI9Lls?p=preview

Edit 2

Если вы хотите кампании ID просто добавить это (обновлено исходный код этого изменения)

{{posts[0].campaigns.campaign[0].id}} 

Answer 2

Из-за вашего объекта posts содержится массив из одного элемента, вы должны использовать posts[0], чтобы получить первый (и единственный) элемент. Кроме того, ваш массив объявлений находится внутри объекта кампаний, поэтому 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> 

EDIT:

И, если вы хотите идентификатор из объекта campagin в том же индексе, чем ваш товар залогодержателя, вы должны добавить track by $index - posts[0].campaigns.pledgees. Таким образом, это стало posts[0].campaigns.pledgees track by $index.

Итак, теперь с $ индекс вы получите правильный индекс, чтобы получить правильный идентификатор кампании в объекте кампании с {{posts[0].campaigns.campaign[$index].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/