Smart Table search not working when creating multiple tables

Question

This is what I am doing. I call a rest api which returns response in this format

"metalanguages": { "1": { "id": 1, "name": "Abkhaz" }, "2": { "id": 2, "name": "Afar" } }, "manufacturers": { "-1": { "id": -1, "name": "all" }, "1": { "id": 1, "name": "RIM" }, "2": { "id": 2, "name": "HP" } }

This is basically a Map of String and Map. I now have to create n number of table where n is number of keys of original map and inside each table I have to show data which will be the value of internal map ("id": 2, "name": "HP")

I have made it working but search is not working. This is my sample code

<div ng-repeat="(key,value) in metadataDetails">
<table  st-table="metadataCollection" st-safe-src="metadataDetails" class="table table-striped">
<thead>
   <tr class="style_tr">
   <th st-sort="name">name</th>
   <th st-sort="name">name</th>
   <th st-sort="description">description</th>
   <th st-sort="countryName">countryName</th>
   <th st-sort="carrierName">carrierName</th>
   </tr>
   <tr class="textSearchTr">
   <th colspan="4" class="textSearchTr">
   <input class="freshblue" placeholder="Enter value to search/filter" type="text" ng-model="searchParam.search" />
   </th>
   </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in getValueMap(key)" ng-show="showRow">
    <td>{{row.id}}</td>
    <td>{{row.name}}</td>
    <td>{{row.description}}</td>
    </tr>
  </tbody>
</table>
</div>

And my js file

AuditMetadataService.get({}, function(data) {

        $scope.numRecord = data.length;
        $scope.metadataDetails = data;
        $scope.metadataCollection = [].concat($scope.metadataDetails);
        console.log("Return value :");
        console.log($scope.metadataDetails);
    });

$scope.getValueMap = function(key) {

        console.log(key);
        return $scope.metadataDetails[key];

    };

Could someone please help??

Answer 1

You can turn your map object into an array by getting it's keys and using the Array.prototype.map function, you will have to repeat this for the inner map objects as well because st-sort expects an array item, not a key value.

$scope.tables = keys.map(function(key) {
    return Object.keys(data[key]).map(function(k) {
        return data[key][k];
    });
});

Then you can iterate $scope.tables using ng-repeat to create all the tables want, clicking the column titles will now sort them properly.

Here is a demo.