Obtain data from Json using angular

Question

Below is my code:

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"
            }]
        }
    }
]

My HTML code:

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

My HTML code where I want to populate data:

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

I am trying to get client_id pleg_fname from array, but do not know how to.

Answer 1

Because of your posts object contains an array of one element, you should use posts[0] to get the first (and the only one) element. Moreover, your pledgees array is inside a campaigns object, so posts[0] become posts[0].compaigns.pledgees.

You should try this :

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

And, if you want the id from the campagin object at the same index than your pledgee item, you have to add track by $index to posts[0].campaigns.pledgees. So it's become posts[0].campaigns.pledgees track by $index.

So, now with $index you get the right index to get the right campaign ID in the campaign object with {{posts[0].campaigns.campaign[$index].id}}

And the result is :

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

You can see the result here : http://jsfiddle.net/Fieldset/y1asxm61/1/

Answer 2

Your pledgess object is an array of objects so you should do this instead and your entire JSON is contained within an array so you need the first element which will be your entire object and you call it with posts[0] and then you specify the object you are trying to iterate : 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>

Edit

You're right, I totally missed that array. See this plunker where I tested it http://plnkr.co/edit/dvdnjv2mN2gljQGI9Lls?p=preview

Edit 2

If you want the campaign ID just add this (updated the original code with this change)

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