displaying an array data in a table using ng-repeat directive in Angular js

Question

I am building an application using Angular.js,Node.js and MongoDB.

I have got an array of data through ajax call and is as follows

[{
    "event":"treat",
    "expenselist":[
        {"text":"a","done":true,"value":"100"},
        {"text":"b","done":true,"value":"400"}
    ],
    "expense":500,
    "sharelist":[
        {"text":"b","done":true},
        {"text":"c"},
        {"text":"d","done":true},
        {"text":"a","done":true},
        {"text":"e","done":true}
    ],
    "shareno":4,
    "shareamount":125
},{
    "event":"lunch",
    "expenselist":[
        {"text":"c","done":true,"value":"500"}
    ],
    "expense":500,
    "sharelist":[
        {"text":"b","done":true},
        {"text":"c","done":true},
        {"text":"d","done":true},
        {"text":"a","done":true},
        {"text":"e","done":true}
    ],
    "shareno":5,
    "shareamount":100
}]

I am pushing the data one by one in an array $scope.sharedetails inorder to display each event in each row.

angular.forEach(data,function(event,k){
$scope.sharedetails.push(data[k]);
$scope.expensedetails.push($scope.sharedetails[k].expenselist);
$scope.attendeedetails.push($scope.sharedetails[k].sharelist);

  angular.forEach($scope.expensedetails,function(text,i){
     angular.forEach($scope.expensedetails[i],function(text,j){

if($scope.expensedetails[i][j].done==true){
$scope.spentpeople.push($scope.expensedetails[i][j].text);   
$scope.expensevalues.push($scope.expensedetails[i][j].value); 

}

});
});
  angular.forEach($scope.attendeedetails,function(text,i){
      angular.forEach($scope.attendeedetails[i],function(text,j){

if($scope.attendeedetails[i][j].done==true){
   $scope.sharelistresult.push($scope.attendeedetails[i][j].text);  
}

});
});
});

HTML:

              <td>{{sharedetail.event}}</td>
            <td><ul class="unstyled">
            <li ng-repeat="spent in spentpeople">
            <span>{{spent}}</span>          
            </li>
            </ul>
            </td>
            <td>{{sharedetail.expenselist.value}}
            <ul class="unstyled">
            <li ng-repeat="expensevalue in expensevalues">
            <span>{{expensevalue}}</span>           
            </li>
            </ul></td>
            <td>{{sharedetail.expense}}</td>
            <td><ul class="unstyled">
            <li ng-repeat="sharename in sharelistresult">
            <span>{{sharename}}</span>          
            </li>
            </ul></td>
            <td>{{sharedetail.shareamount}}</td>
            </tr>

I want the result like

Event |Spent By |Spent Amounts|Totalamount |Shared By |No of shares|ShareAmount
--------------------------------------------------------------------------------------
treat |a        |100          |500         |b         |4            |125
      |b        |400          |            |d
      |         |             |            |a
      |         |             |            |e
 --------------------------------------------------------------------------------
lunch |c        |500          |500         |b         |5            |100
                                           |c
                                           |d
                                           |a
                                           |e         |

I have edited my code.In this,I get the required result only when there is a single row.

When there are multiple entries(event),I get

 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.6/ngRepeat/dupes?p0=spent%20in%20spentpeople&p1=string%3A

How to display expense list array with "text" seperately and "value" seperately. Please advice

Sorry, not sure what you want to get. Could you please provide an example of what shall be in result? — GRaAL
– GRaAL, Commented Jan 27, 2014 at 11:50
Why are you pushing your objects one by one ? (Understand it as, you shouldn't be doing it) — Florian F.
– Florian F., Commented Jan 27, 2014 at 12:36

mainguy · Accepted Answer · 2014-01-27 13:41:31Z

4

You dont need to do all this pushing if you allready have a json array. Just asign it to the scope and render your table like this:

<tr ng-repeat="sharedetail in sharedetails">
  <td>{{sharedetail.event}}</td>
  <td>
    <li ng-repeat="item in sharedetail.expenselist">
      {{item.text}}
    </li>
  </td>
  <td>
    <li ng-repeat="item in sharedetail.expenselist">
      {{item.value}}
    </li>
  </td>
  <td>{{sharedetail.expense}}</td>
  </td>
  <td>
    <li ng-repeat="item in sharedetail.sharelist">
      {{item.text}}
    </li>
  </td>
  <td>{{sharedetail.shareno}}</td>
  <td>{{sharedetail.shareamount}}</td>
</tr>

Look at this plunker here: Plunker

Don't forget to setup the controller in the table tag.

answered Jan 27, 2014 at 13:41

mainguy

8,3312 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user67867 Over a year ago

But I have to check if "text":"b","done":true or "false".I want to display only the checked items

mainguy Over a year ago

Just add an ng-if="item.done" to the list repeater. See here:plnkr.co/edit/RHLnIC4raTWuOAYsTjtO?p=preview

Rayiez Over a year ago

Can we also get the index of array sharedetails.

Grant Lay Over a year ago

The <li> element should be a child or either a <ul> or <ol> for the html to be valid.

Collectives™ on Stack Overflow

displaying an array data in a table using ng-repeat directive in Angular js

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related