CODEWITHSUNDEEP
javascriptangularjs
Nikitka
Nikitka

Reputation: 428

Show array on page

I have array, where each object have field which contains object with arrays, for example:

var objects = [{
       'id':'1',
       'name': 'Joe',
       'last': 'Doe',
       'additionalField': {
           "a":[1,2,3],
           'b':[4,5,6],
           'c':[7,8,9],
           'd':[7,8,9],
       }, {...}, ...
 }]

How I can represet additionalField in template? Now I transpose matrix of arrays, and show like:

<tr ng-repeat="field in transposed">
    <td ng-repeat="element in field">
        <a ng-click="someAction(elment.name, elment.value)">{{element.value}}</a>
    </td>
</tr>

When I transpose matrix, I build objects like:

var transposed = [
   [{'name': 'a', 'value': '1'},
    {'name': 'b', 'value': '4'},
    {'name': 'c', 'value': '7'}],
   [{'name': 'a', 'value': '2'},
    {'name': 'b', 'value': '5'},
    {'name': 'c', 'value': '8'}],
]

But it seems too complex. Have you any idea how I can do it simple? I mean can I do this without transposing? for get table like:

1 4 7 7
2 5 8 8
3 6 9 9

Upvotes: 0

Views: 61

Answers (2)

Shaishab Roy
Shaishab Roy

Reputation: 16805

If your objects array like:

$scope.objects= [{
       'id':'1',
       'name': 'Joe',
       'last': 'Doe',
       'additionalField': {
           "a":[1,2,3],
           'b':[4,5,6],
           'c':[7,8,9],
           'd':[7,8,9],
       }
 }];

and want to show like:

1 4 7 7
2 5 8 8
3 6 9 9

then can try like:

<tr ng-repeat="data in objects">
    <td ng-repeat="(key, value) in data.additionalField">
        <p ng-repeat="item in value">{{item}}</p>
    </td>
</tr>

Plunker Demo

Upvotes: 1

Diego Pessoa
Diego Pessoa

Reputation: 93

You can transpose your matrix like this:

var transposed = [
   [{'a': '1'},
    {'b': '4'},
    {'c': '7'}],
   [{'a': '2'},
    {'b': '5'},
    {'c': '8'}]
]

And show at the page like:

<tr ng-repeat="field in transposed">
    <td ng-repeat="value in field">
        <a ng-click="someAction($index, value)">{{value}}</a>
    </td>
</tr>

Upvotes: 0

Related Questions