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>

Answer 1

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