Отображение данных массива в таблице с использованием директивы ng-repeat в Angular js

Question

Я создаю приложение, используя Angular.js,Node.js и MongoDB.

Я получил массив данных через вызов ajax и выглядит следующим образом

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

Я толкаю данные по одному в массиве $scope.sharedetails Для отображения каждого события в каждой строке.

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>

Я хочу результат как

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         |

Я отредактировал свой код. В этом я получаю требуемый результат, только когда есть одна строка.

Когда есть несколько записей (событие), я получаю

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

Как отобразить массив списков расходов с "текстом" отдельно и "значением" отдельно. Пожалуйста посоветуй

Answer 1

Вам не нужно делать все это, если у вас уже есть массив json. Просто назначьте его области действия и визуализируйте вашу таблицу следующим образом:

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

Посмотрите на этот плункер здесь: Плункер

Не забудьте настроить контроллер в табличном теге.