Print table using object of arrays AngularJS

Question

I have an object that looks something like this:

{
  item1: [element1, element2],
  item2: [element1, element2],
  item3: [element1, element2],
  item4: [element1, element2]
}

What I'm trying to do is to print a table with each element of each array in a new row. This issue I'm having is how to get the contents without repeating an entire div or table with ng-repeat.

Example:

<table ng-repeat="(key, value) in accounts">
  <tr ng-repeat="element in value">
    <td>{{element}}</td>
  </tr>
</table>

Which is giving me a new table for each key. I just one table with a row for each array element. Any way to do this with angular or do I need to use javascript?

tymeJV · Accepted Answer · 2017-06-13 15:40:28Z

1

It'd probably be easier to mash your elements into one array, then repeat over that array:

$scope.elements = Object.keys($scope.accounts).reduce(function(arr, key) {
    return arr.concat($scope.accounts[key])
}, []);

And then the HTML:

<table>
    <tr ng-repeat="element in elements">
        <td>{{element}}</td>
    </tr>

answered Jun 13, 2017 at 15:40

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

Print table using object of arrays AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related