Angular not displaying JSON array data

Question

I've spent a few hours on this and I just can't get the array data to display on the page. I'm not getting any errors.

     (function() {
        var app = angular.module('myApp', []);

        app.controller('AppController', ['$http', function($http){
            this.files = [];

            $http.get('angular-data.json').success(function(data){
                this.files = data;
            });
        }]);
    })();

And inside my angular-data.json file:

[{"name": "myfile.doc","ext": "doc","size": "168KB","modified": "5 mins"}]

Someone please help :-(

Answer 1

Convert your .success to .then

Then convert this

this.files = data;

to this

this.files = data.data;

Answer 2

Try this

this.files = data[0];

In angular-data.json file it have object in array

Answer 3

I think the this in success callback is not getting its context.

Try binding it in $scope or if you are using vm, just like

for $scope

(function() {
    var app = angular.module('myApp', []);

    app.controller('AppController', ['$http', '$scope', function($http, $scope){
        $scope.files = [];

        $http.get('angular-data.json').success(function(data){
            $scope.files = data;
        });
    }]);
})();

For vm

(function() {
    var app = angular.module('myApp', []);

    app.controller('AppController', ['$http', function($http){
        var vm = this;
        vm.files = [];

        $http.get('angular-data.json').success(function(data){
            vm.files = data;
        });
    }]);
})();