how to import multiple JSON data into table using ng-Tables

Question

I am using ng-table for AngularJS and i am using single JSON file for the table data. i want to import multiple JSON files into a single table. I am able to import single JSON file using this code below.

Thank you in advance.

HTML

<table ng-table="tableParams" show-filter="true" class="table ng-table-responsive">
                <tr ng-repeat="user in $data">
                    <td data-title="'ID'" sortable="'ID'">
                        {{user.ID}}
                    </td>
                    <td data-title="'Name'" sortable="'Name'" filter="{ 'name': 'Name' }">
                        {{user.Name}}
                    </td>
                    <td data-title="'Email'" sortable="'email'">
                        {{user.email}}
                    </td>
                    <td data-title="'Address'" sortable="'address'">
                        {{user.address}}
                    </td>
                    <td data-title="'PersonalEmail'" sortable="'personalemail'">
                        {{user.personalemail}}
                    </td>
                    <td data-title="'PhoneNo'" sortable="'phoneno'">
                        {{user.phoneno}}
                    </td>
                    <td data-title="'Status'" sortable="'status'">
                        {{user.status}}
                    </td>
                </tr>
            </table>

JavaScript

var app = angular.module('main', ['ngTable']).controller('DemoCtrl', function($scope, ngTableParams, NameService) {

    var data = NameService.data;

    $scope.tableParams = new ngTableParams(
      {
        page: 1,            // show first page
        count: 10,           // count per page
        sorting: {name:'asc'}
      },
      {
        total: 0, // length of data
        getData: function($defer, params) {
          NameService.getData($defer,params,$scope.filter);
        }
    });

    $scope.$watch("filter.$", function () {
        $scope.tableParams.reload();
    });

});

app.service("NameService", function($http, $filter){

  function filterData(data, filter){
    return $filter('filter')(data, filter)
  }

  function orderData(data, params){
    return params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData;
  }

  function sliceData(data, params){
    return data.slice((params.page() - 1) * params.count(), params.page() * params.count())
  }

  function transformData(data,filter,params){
    return sliceData( orderData( filterData(data,filter), params ), params);
  }

  var service = {
    cachedData:[],
    getData:function($defer, params, filter){
      if(service.cachedData.length>0){
        console.log("using cached data")
        var filteredData = filterData(service.cachedData,filter);
        var transformedData = sliceData(orderData(filteredData,params),params);
        params.total(filteredData.length)
        $defer.resolve(transformedData);
      }
      else{
        console.log("fetching data")
        $http.get("json/1.json").success(function(resp)
        {
          angular.copy(resp,service.cachedData)
          params.total(resp.length)
          var filteredData = $filter('filter')(resp, filter);
          var transformedData = transformData(resp,filter,params)

          $defer.resolve(transformedData);
        });  
      }

    }
  };
  return service;  
});

Answer 1

Retrieve all your JSON content with $q.all() and merge your arrays in the callback. Finally pass the resulting array to ng-table.