Pass json to angular controller

Question

i want to pass a json file or object to an angular controller to use it with ng-repeat.

My json object is stored in my index.js file and written to data.json. My controller.js file looks like the following:

var fs = require('fs');

var jobs = fs.readFile('out/data.json', 'utf-8', (err, data) => {
    if (err) throw err;
});

angular.module('slrm', [].controller('slrmctrl', function($scope) {
    $scope.data = jobs.data;
}));

And thats my html file:

<table class="table">
        <thead>
            <th scope="col">#</th>
            <th scope="col">JOBNAME</th>
            <th scope="col">USER</th>
            <th scope="col">NODE</th>
            <th scope="col">CPUS</th>
            <th scope="col">START</th>
            <th scope="col">STATE</th>
            </thead>
            <tbody ng-app="slrm" ng-controller="slrmctrl">
                <tr ng-repeat="x in data | orderBy : 'JOBID'">
                    <td>{{ x.JOBID }}</td>
                    <td>{{ x.NAME }}</td>
                    <td>{{ x.USER }}</td>
                    <td>{{ x.NODELIST }}</td>
                    <td>{{ x.CPUS }}</td>
                    <td>{{ x.STATE }}</td>
                    <td>{{ x.REASON }}</td>
                </tr>
            </tbody>
    </table>
    <script src="js/controller.js"></script>

Now I have 2 questions. Im providing this html with:

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/view/index.html');
});

var server = app.listen(3000, function() {
    console.log('Server running');
};

Is the controller.js file even imported? because bootstrap.css is not imported somehow.

The other Question is if the line

$scope.data = jobs.data;

is even working? Should I read the file or use the exported object from index.js? How do I export only this one object?

I built this from scratch because im very new to js and stuff.

Thank you!

Answer 1

I think the issue lies in your module and controller declaration. When declaring a module, you have to instantiate it first, by passing it's dependencies.

angular.module('slrm', []);

Afterwards, you can attach a controller to the module

angular.module('slrm').controller('slrmctrl', function($scope) { $scope.data = jobs.data; }));

Secondly, instead of reading the data.json object externally and passing it to controller, why don't you read the data inside your controller?

angular.module('slrm').controller('slrmctrl', ['$scope', '$http', function($scope, $http) {
    $http.get('out/data.json')
        .then(function(response) {
            $scope.data = response.data;
        }); 
}]);

EDIT to show example of timer (polling) implementation

angular.module('slrm').controller('slrmctrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
    $scope.refreshInterval = 900; // Sec (15 Minutes)

    $scope.getData = function () {
        $http.get('out/data.json')
            .then(function(response) {
                $scope.data = response.data;

                return $timeout($scope.getData, $scope.getTimeLeftToRefresh());
            }); 
    };

    $scope.getTimeLeftToRefresh = function () {
        var now = new Date();
        var timeLeftToRefresh = ($scope.refreshInterval - (now.getMinutes() * 60 + now.getSeconds()) % $scope.refreshInterval) * 1000;

        return timeLeftToRefresh;
    };

    // Initial call to start the loop
    $scope.getData();

}]);