Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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

share|improve this question
    
Sorry, not sure what you want to get. Could you please provide an example of what shall be in result? –  GRaAL Jan 27 at 11:50
    
Please refer my edits –  User2404 Jan 27 at 12:30
    
Why are you pushing your objects one by one ? (Understand it as, you shouldn't be doing it) –  Florian F. Jan 27 at 12:36
    
To display row-wise –  User2404 Jan 27 at 12:47
    
I have updated my latest code –  User2404 Jan 27 at 13:01
add comment

1 Answer

up vote 1 down vote accepted

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.

share|improve this answer
    
But I have to check if "text":"b","done":true or "false".I want to display only the checked items –  User2404 Jan 27 at 14:09
    
Just add an ng-if="item.done" to the list repeater. See here:plnkr.co/edit/RHLnIC4raTWuOAYsTjtO?p=preview –  mainguy Jan 27 at 14:18
    
It works.Thanks a lot –  User2404 Jan 27 at 14:24
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.