Angular - create a dynamic template for ng-repeat over different objects

Question

Suppose I have an array of objects. I need to create dynamically a table using ng-repeat. The thing is, I don't want to hardcode every property of the object to the html. I created an array which contain the relevant keys to the current object (the input can sometimes be different). How can I create ng-repeat which will run over each object of the data array and printing each property of the keys array I created earlier?

xlsxTableProps is an array with strings which are keys of every object inside parsedXslxData array of objects.

This is how I create the keys for the input (which again, can be different each time)
JS:

    Object.keys(this.parsedXslxData[0]).forEach(key => {
        this.xlsxTableProps.push(key)
      });

HTML:

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col" ng-repeat="header in $ctrl.xlsxTableProps">{{header}}</th>                        
        </tr>
    </thead>
    <tr ng-repeat="item in $ctrl.parsedXslxData">
        <td>{{$index}}</td>
        <td ng-repeat="tableItem in $ctrl.xlsxTableProps"></td>
        <td>{{item[{{tableItem}}]}}</td>
    </tr>
</table>

problem is {{item[{{tableItem}}]}} might contain value for some and might not for others, right? — Zavi
– Zavi, Commented Jan 17, 2019 at 10:56
No, each data array is built the same. Once in a while it can be different, but every time this array will have the same structured objects — Alex
– Alex, Commented Jan 17, 2019 at 11:02
Ah I see the problem is with syntax, try simply {{item[tableItem]}} — Zavi
– Zavi, Commented Jan 17, 2019 at 11:37
it prints the table but does not fill it with data, I think it does not know whats the [tableItem] inside — Alex
– Alex, Commented Jan 17, 2019 at 11:43
My bad, it works flawlessly. Post a your answer and I'll select it as the right answer. thanks! — Alex
– Alex, Commented Jan 17, 2019 at 11:46

Zavi · Accepted Answer · 2019-01-17 11:50:38Z

2

Problem is with your syntax here {{item[{{tableItem}}]}}, no need to use extra pair of brackets. Simply use {{item[tableItem]}}.

answered Jan 17, 2019 at 11:50

Zavi

72311 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Angular - create a dynamic template for ng-repeat over different objects

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