ngTable in angularjs

0

I'm trying to show a table with ngTable in angularjs. This is my example

controller.js

var tableData = []
    //Table configuration
    $scope.tableParams = new NgTableParams({
        page: 1,
        count: 6
    },{
        total:tableData.length,
        //Returns the data for rendering
        getData : function(params){
            $http.get('data.json').then(function(response) {
                tableData = response.data.person;
                tableData.slice((params.page() - 1) * params.count(), params.page() * params.count());
                params.total(tableData.length);
            });
        }
    });

vista.html

<table ng-table="tableParams"  class="table table-bordered" >
        <thead>
            <tr>
                <th rowspan="2">ID</th>
                <th colspan="2">primary</th>
                <th colspan="2">secondary</th>
            </tr>
            <tr>
                <th>NAME</th>
                <th>AGE</th>
                <th>NAME</th>
                <th>AGE</th>
            </tr>
        <thead>
        <tbody>
            <tr ng-repeat="person in $data"> //QUE ES DATA?
                <td data-title="'id'" >
                    {{person.id}}
                </td>
                <td data-title="'Name'">
                    {{person.primary.name}}
                </td>
                <td data-title="'Age'">
                    {{person.primary.age}}
                </td>
                <td data-title="'Name'">
                    {{person.secondary.name}}
                </td>
                <td data-title="'Age'">
                    {{person.secondary.age}}
                </td>
            </tr>
        </tbody>
        </tbody>
    </table>

json

{
  "person":[
    {
      "id" : 1,
      "primary" : {"name":"John", "age":"20"},
      "secondary" : {"name":"LINDA", "age":"23"}
    },
    {
      "id" : 2,
      "primary" : {"name":"SMITH", "age":"20"},
      "secondary" : {"name":"KATE", "age":"25"}
    },
    {
      "id" : 3,
      "primary" : {"name":"Sandeep", "age":"20"},
      "secondary" : {"name":"Sumanta", "age":"21"}
    },
    {
      "id" : 4,
      "primary" : {"name":"Bapi", "age":"20"},
      "secondary" : {"name":"Tapi", "age":"25"}
    },
    {
      "id" : 5,
      "primary" : {"name":"John", "age":"20"},
      "secondary" : {"name":"LINDA", "age":"23"}
    },
    {
      "id" : 6,
      "primary" : {"name":"SMITH", "age":"20"},
      "secondary" : {"name":"KATE", "age":"25"}
    },
    {
      "id" : 7,
      "primary" : {"name":"Sandeep", "age":"20"},
      "secondary" : {"name":"Sumanta", "age":"21"}
    },
    {
      "id" : 8,
      "primary" : {"name":"Bapi", "age":"20"},
      "secondary" : {"name":"Tapi", "age":"25"}
    },
    {
      "id" : 1,
      "primary" : {"name":"John", "age":"20"},
      "secondary" : {"name":"LINDA", "age":"23"}
    },
    {
      "id" : 2,
      "primary" : {"name":"SMITH", "age":"20"},
      "secondary" : {"name":"KATE", "age":"25"}
    },
    {
      "id" : 3,
      "primary" : {"name":"Sandeep", "age":"20"},
      "secondary" : {"name":"Sumanta", "age":"21"}
    },
    {
      "id" : 4,
      "primary" : {"name":"Bapi", "age":"20"},
      "secondary" : {"name":"Tapi", "age":"25"}
    },
    {
      "id" : 5,
      "primary" : {"name":"John", "age":"20"},
      "secondary" : {"name":"LINDA", "age":"23"}
    },
    {
      "id" : 6,
      "primary" : {"name":"SMITH", "age":"20"},
      "secondary" : {"name":"KATE", "age":"25"}
    },
    {
      "id" : 7,
      "primary" : {"name":"Sandeep", "age":"20"},
      "secondary" : {"name":"Sumanta", "age":"21"}
    },
    {
      "id" : 8,
      "primary" : {"name":"Bapi", "age":"20"},
      "secondary" : {"name":"Tapi", "age":"25"}
    },
    {
      "id" : 1,
      "primary" : {"name":"John", "age":"20"},
      "secondary" : {"name":"LINDA", "age":"23"}
    },
    {
      "id" : 2,
      "primary" : {"name":"SMITH", "age":"20"},
      "secondary" : {"name":"KATE", "age":"25"}
    },
    {
      "id" : 3,
      "primary" : {"name":"Sandeep", "age":"20"},
      "secondary" : {"name":"Sumanta", "age":"21"}
    },
    {
      "id" : 4,
      "primary" : {"name":"Bapi", "age":"20"},
      "secondary" : {"name":"Tapi", "age":"25"}
    },
    {
      "id" : 5,
      "primary" : {"name":"John", "age":"20"},
      "secondary" : {"name":"LINDA", "age":"23"}
    },
    {
      "id" : 6,
      "primary" : {"name":"SMITH", "age":"20"},
      "secondary" : {"name":"KATE", "age":"25"}
    },
    {
      "id" : 7,
      "primary" : {"name":"Sandeep", "age":"20"},
      "secondary" : {"name":"Sumanta", "age":"21"}
    },
    {
      "id" : 8,
      "primary" : {"name":"Bapi", "age":"20"},
      "secondary" : {"name":"Tapi", "age":"25"}
    },
    {
      "id" : 1,
      "primary" : {"name":"John", "age":"20"},
      "secondary" : {"name":"LINDA", "age":"23"}
    },
    {
      "id" : 2,
      "primary" : {"name":"SMITH", "age":"20"},
      "secondary" : {"name":"KATE", "age":"25"}
    },
    {
      "id" : 3,
      "primary" : {"name":"Sandeep", "age":"20"},
      "secondary" : {"name":"Sumanta", "age":"21"}
    },
    {
      "id" : 4,
      "primary" : {"name":"Bapi", "age":"20"},
      "secondary" : {"name":"Tapi", "age":"25"}
    },
    {
      "id" : 5,
      "primary" : {"name":"John", "age":"20"},
      "secondary" : {"name":"LINDA", "age":"23"}
    },
    {
      "id" : 6,
      "primary" : {"name":"SMITH", "age":"20"},
      "secondary" : {"name":"KATE", "age":"25"}
    },
    {
      "id" : 7,
      "primary" : {"name":"Sandeep", "age":"20"},
      "secondary" : {"name":"Sumanta", "age":"21"}
    },
    {
      "id" : 8,
      "primary" : {"name":"Bapi", "age":"20"},
      "secondary" : {"name":"Tapi", "age":"25"}
    }
  ]
}

the truth is the first time I use ngTable and I do not use it because it uses $ data my error I believe this variable because it does not show anything my table. How can i solve this? I thank you in advance

    
asked by Dimoreno 17.06.2017 в 14:51
source

1 answer

0

Viewing the documentation example from ngTable is expected to return%% of a Promise that provides an array of objects to be shown in the table. In your case it would be:

    getData : function(params){
        return $http.get('data.json').then(function(response) {
            tableData = response.data.person;
            tableData.slice((params.page() - 1) * params.count(), params.page() * params.count());
            params.total(tableData.length);
            return tableData;
        }).$promise;
    
answered by 17.06.2017 / 15:53
source