How to get table data from json file in angularjs

Question

I want to get data from a JSON file using angularjs or jquery. The following code is not working, I cannot find the mistake:

JSFIDDLE

html:

 <head>
 <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<script data-require="[email protected]" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>

<link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head> <body ng-app="main" ng-controller="DemoCtrl">

Example from <a target="_blank" href="https://github.com/collinsauve">collinsauve</a>


<h2>Dataset: <select ng-model="dataset" ng-options="ds for ds in datasets"></select></h2>

<table ng-table="tableParams" class="table">
    <tr ng-repeat="user in $data">
        <td data-title="'Name'" sortable="name">
            {{user.name}}
        </td>
        <td data-title="'Age'" sortable="'age'">
            {{user.age}}
        </td>
    </tr>
</table></body>

script.js:

var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
$scope.datasets = ["1","2"];
$scope.dataset = "1"; 
var getData = function() {
     if($scope.dataset=="1")
     { 
     $.getJSON('http://localhost/custest/json1.json', function(json) {
     return json;  
     }); 

   } 
    if($scope.dataset=="2")
    { 
     $.getJSON('http://localhost/custest/json2.json', function(json) {
     return json;  
     }); 
    } 
};
$scope.$watch("dataset", function () {
    $scope.tableParams.reload();
});         
$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10,          // count per page
    sorting: {
        name: 'asc'     // initial sorting
    }
}, {
    total: function () { return getData().length; }, // length of data
    getData: function($defer, params) {
        var filteredData = getData();
        var orderedData = params.sorting() ?
                            $filter('orderBy')(filteredData, params.orderBy()) :
                            filteredData;

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    },
    $scope: { $data: {} }
});
});

json1.json:

            [{name: "One", age: 50},
            {name: "Two", age: 43},
            {name: "Three", age: 27},
            {name: "Four", age: 29},
            {name: "Five", age: 34},
            {name: "Six", age: 43},
            {name: "Seven", age: 27},
            {name: "Eight", age: 29}
          ];

json2.json:

            [{name: "Jacob", age: 50},
            {name: "Jacob", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29}
            ];

$.getJson is async so you cannot simply return the data unless it is returned from the server — Raghavendra
– Raghavendra, Commented Jul 10, 2014 at 10:58
Here's a working example plnkr.co/edit/D690JxObvDH52XWaORNi?p=preview — Raghavendra
– Raghavendra, Commented Jul 10, 2014 at 11:00

dmullings · Accepted Answer · 2014-07-10 13:43:24Z

Instead of using jQuery's ajax method's you should use angular's http service. https://docs.angularjs.org/api/ng/service/$http

Once the request has successfully completed and the data has been set then call $scope.tableParams.reload();

Working Plunker: http://plnkr.co/edit/GFEPEUzhHR8fKTTSxxyy?p=preview

var app = angular.module('plunker', ['ngTable']);

app.controller('MainCtrl', function($scope, $filter, $http, ngTableParams) {

    $scope.datasets = ["1", "2"];
    $scope.dataset = "1";

    var file,jsonData;

    $scope.$watch("dataset", function () {
        if($scope.dataset=="1"){
            file = 'json1.json';
        }
        else if($scope.dataset=="2"){
            file = 'json2.json';
        }
        $http.get(file).success(function(response){
            jsonData = response;
            $scope.tableParams.reload();
        });
    });
    $scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 10, // count per page
        sorting: {
            name: 'asc' // initial sorting
        }
    }, {
        total: function () {
            return jsonData.length;
        }, // length of data
        getData: function ($defer, params) {
            var filteredData = jsonData;
            var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : filteredData;

            if(orderedData){
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        },
        $scope: {
            $data: {}
        }
    });

});

Collectives™ on Stack Overflow

How to get table data from json file in angularjs

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