current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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}
            ];
share|improve this question
    
Can you provide a fiddle or plunker? –  Raghav Jul 10 '14 at 10:22
    
jsfiddle.net/88xmQ/2 –  user2160720 Jul 10 '14 at 10:31
    
$.getJson is async so you cannot simply return the data unless it is returned from the server –  Raghav Jul 10 '14 at 10:58
    
Here's a working example plnkr.co/edit/D690JxObvDH52XWaORNi?p=preview –  Raghav Jul 10 '14 at 11:00
    
no..i want data from json file not in a var. –  user2160720 Jul 10 '14 at 11:42

1 Answer 1

up vote 2 down vote

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: {}
        }
    });

});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.