0

I am trying to insert data to table with ngrepeat but no success

I have list with data 

$scope.chart= {
    labels: [],
    data: []
};

if printing out chart.data I get list [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

So, I want to separate comma values from that data list to different table cells with ng-repeat attribute.

I tried smt like this but did not work: 

<div ng-controller="Controller">
    <table>
        <tr ng-repeat="item in chart">
            <td>{{$index + 1}}</td>
            <td>{{item.labels}}</td>
            <td>{{item.data}}</td>
        </tr>
    </table>
</div>

Probably there is something wrong in my controller?

Pavel Smirnov
  • 4,611
  • 3
  • 18
  • 28
Aleks
  • 1

3 Answers3

0

Assuming you want a row for each data point/label combination and the arrays are the same length you can loop over one of the arrays and use the index to target the other array values

<div ng-controller="Controller">
    <table>
        <tr ng-repeat="item in chart.data">
            <td>{{$index + 1}}</td>
            <td>{{chart.labels[$index]}}</td>
            <td>{{item}}</td>
        </tr>
    </table>
</div>
charlietfl
  • 170,828
  • 13
  • 121
  • 150
0

I prepared little example how to manage with some lists. Hope it'll help you. Here piece of code with simple lists.

this.chart = {
  labels: ['january', 'february', 'march'],
  data: ['5 users', '6 users', '3 users']
};
<table>
  <thead>
    <tr>
      <th ng-repeat="label in $ctrl.chart.labels">{{label}}</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td ng-repeat="item in $ctrl.chart.data">{{item}}</td>
    </tr>
  </tbody>
</table>

Follow extended example with two dimensional arrays on StackBlitz

Eugen Ivanou
  • 13
  • 3
  • Thanks, very helpful and labels part is working as it should. It means it prints each item from list to different cell in table. Though, if I try to ng-repeate my data array then it only gives me [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] into the first cell. I would like to separate them. labels (which are number of dates 1-31) and then below/up to them data results for each day. – Aleks Jul 19 '19 at 06:52
  • @Aleks I've changed my example on stackblitz, try to add `{{item}}` you can read more about track by $index here : https://stackoverflow.com/questions/39640160/what-is-track-by-in-angularjs-and-how-does-it-work – Eugen Ivanou Jul 19 '19 at 08:29
-1

I think you need to change your data structure. It feels like you have key-value pair label-data. So it should be something like this:

$scope.chart= 
[{
   label: '', //1,2,3,4,5,
   data: '' // your data
}]

And then you can try this: 

<div ng-controller="Controller">
    <table>
        <tr ng-repeat="item in chart">
            <td>{{$index + 1}}</td>
            <td>{{item.label}}</td>
            <td>{{item.data}}</td>
        </tr>
    </table>
</div>

Then how you populate your chart:

var item = { label: 1, data: 'foo'}
$scope.chart.push(item)
OlegI
  • 5,472
  • 4
  • 23
  • 31
  • there are no objects in the `data` array – charlietfl Jul 18 '19 at 13:52
  • That structure doesn't make sense. There is only one element in the `chart` array that way so `item.labels[$index]` is itself an array – charlietfl Jul 18 '19 at 14:02
  • if to follow author intentions, he wants to iterate through something which has a collection of labels and data – OlegI Jul 18 '19 at 14:04
  • Also working as version which is suggested above. The problem is that I still can't get data to different cells. I have labels which are number of dates (1-31) and I then data for each day in arraylist. I only get [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] array into the first cell. How to separate them – Aleks Jul 19 '19 at 06:54
  • @Aleks that data for each day in arraylist, is it an array? Basically, you have a KeyValue pair. Some data bound to the day(1-31). How does that data look like? Is it string, object or array? – OlegI Jul 19 '19 at 12:18
  • List data = new ArrayList<>(); int[] days = new int[...]; this is where labels come from – Aleks Jul 22 '19 at 06:16