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

The code worked fine when I had the array in the page, so I'm guessing there's some issue with the way I'm calling the JSON data into the array. — Daniel Williams
– Daniel Williams, Commented May 4, 2016 at 5:01
@DanielWilliams Have you got a chance to try my answer. I really think this is your problem. — M. Junaid Salaat
– M. Junaid Salaat, Commented May 13, 2016 at 12:12

Anik Islam Abhi · Accepted Answer · 2016-05-04 05:02:57Z

1

Convert your .success to .then

Then convert this

this.files = data;

to this

this.files = data.data;

answered May 4, 2016 at 5:02

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Williams Over a year ago

Regrettably, I get the same result - nothing displayed.

Anik Islam Abhi Over a year ago

Can you provide output of this console.log(data.data) and you are using .then right ? @DanielWilliams

Zeros · Accepted Answer · 2016-05-04 05:15:11Z

0

Try this

this.files = data[0];

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

answered May 4, 2016 at 5:15

Zeros

13 bronze badges

1 Comment

Daniel Williams Over a year ago

That will only ever allow one array item.

M. Junaid Salaat · Accepted Answer · 2016-05-04 05:42:01Z

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

Collectives™ on Stack Overflow

Angular not displaying JSON array data

3 Answers 3

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Related