CODEWITHSUNDEEP
angularjsjson
Daniel Williams
Daniel Williams

Reputation: 2317

Angular not displaying JSON array data

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 :-(

Upvotes: 0

Views: 569

Answers (3)

M. Junaid Salaat
M. Junaid Salaat

Reputation: 3783

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;
        });
    }]);
})();

Upvotes: 0

Zeros
Zeros

Reputation: 1

Try this

this.files = data[0];

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

Upvotes: 0

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Convert your .success to .then

Then convert this 

this.files = data;

to this 

this.files = data.data;

Upvotes: 1

Related Questions