Can't get $http.get to work in Ionic app

Question

I'm trying to build my first Ionic app and to use a simple list population using $http.get and JSON. What I have is this:

.controller('ReportTabCtrl', function($scope) {

$scope.items = [
{ id: 0 },
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9 },
{ id: 10 },
{ id: 11 },
{ id: 12 },
{ id: 13 },
{ id: 14 },
{ id: 15 },
{ id: 16 },
{ id: 17 },
{ id: 18 },
{ id: 19 },
{ id: 20 },
{ id: 21 },
{ id: 22 },
{ id: 23 },
{ id: 24 },
{ id: 25 },
{ id: 26 },
{ id: 27 },
{ id: 28 },
{ id: 29 },
{ id: 30 },
{ id: 31 },
{ id: 32 },
{ id: 33 },
{ id: 34 },
{ id: 35 },
{ id: 36 },
{ id: 37 },
{ id: 38 },
{ id: 39 },
{ id: 40 },
{ id: 41 },
{ id: 42 },
{ id: 43 },
{ id: 44 },
{ id: 45 },
{ id: 46 },
{ id: 47 },
{ id: 48 },
{ id: 49 },
{ id: 50 }
];
});

And this works great. The list is populated as it should. What I want is to move the contents of $scope.items to an external file (to be able to generate it dynamically) and call it using $http.get.

I've tried this without any success:

.controller('ReportTabCtrl', function($scope, $http) {
$http.get('items.json')
    .success(function(data) {
        $scope.items = data;
    })
});

The content of the items.json file is the same as the $scope.items variable.

What am I doing wrong?

/Carl

Answer 1

You need to put " double qoutes aside id property in each element of items.json to make it valid json

items.json

[
  { "id": 0 },
  { "id": 1 },
  { "id": 2 }
  // and so on
  //.
  //.
]

Demo Plunkr

Answer 2

I would also read this previous thread AngularJS: factory $http.get JSON file. There are a couple things that could be going wrong for you.