Angular $http service does not load json file

Question

Hello angular experts!

I used this custom directive for a table (implementation) but when I try to use $http service load that json array from a file, json is not loaded into $scope.items, I am a beginner in angular and on fairly advance javascript thus I need some help from you.

controller initialization

    fessmodule.controller('ptiListController', function($http, $scope, $filter) {

$http service call

    $http.get('data/ptis/ptis.json').then(function(response) {
            $scope.items = response.data;
        }
    );

browser console error

TypeError: Cannot read property 'length' of undefined
at Scope.$scope.groupToPages (http://localhost:8000/app/modules/app/phone/scripts/pti-list-controller.js:75:49)
at Scope.$scope.search (http://localhost:8000/app/modules/app/phone/scripts/pti-list-controller.js:68:16)
at new <anonymous> (http://localhost:8000/app/modules/app/phone/scripts/pti-list-controller.js:117:12)
at invoke (http://localhost:8000/app/lib/js/angular.js:4185:17)
at Object.instantiate (http://localhost:8000/app/lib/js/angular.js:4193:27)
at http://localhost:8000/app/lib/js/angular.js:8462:28
at link (http://localhost:8000/app/lib/js/angular-route.js:975:26)
at invokeLinkFn (http://localhost:8000/app/lib/js/angular.js:8219:9)
at nodeLinkFn (http://localhost:8000/app/lib/js/angular.js:7729:11)
at compositeLinkFn (http://localhost:8000/app/lib/js/angular.js:7078:13) <div ng-view="" class="ng-scope">

so what I have changed from the fiddle is:

instead of:

$scope.items = [
    {"id":1,"name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5 ":"field5 1"}, 
    {"id":2,"name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5 ":"field5 2"}, 
    {"id":3,"name":"name 3","description":"description 1","field3":"field3 3","field4":"field4 3","field5 ":"field5 3"}
];

i have changed to this:

    $http.get('data/ptis/ptis.json').then(function(response) {
            $scope.items = response.data;
        }
    );

and also, I have tried using the service call as:

    $http.get('data/ptis/ptis.json').success(function(data) {
        $scope.items = data;
    });

and got the same behavior.

Thank you in advance!

Can you post your dir structure as well? is the response ok? Is the JSON valid? check on jsonlint.com — painotpi
– painotpi, Commented Mar 16, 2015 at 9:09
I don't see the entire code, is it possible that you tried using $scope.items before response.data was assigned to it successfully? — Or Guz
– Or Guz, Commented Mar 16, 2015 at 9:09
@aurelius why are you using .then() in this case? can you try the .success() and/or .error() directly. — painotpi
– painotpi, Commented Mar 16, 2015 at 9:11
@ta-run you can see above, i have edited the question, adding that I have tried calling the $http in your proposed way and got the same behavior... — aurelius
– aurelius, Commented Mar 16, 2015 at 9:16

Piotr Dajlido · Accepted Answer · 2015-03-16 09:32:05Z

1

I believe you are using the $http.get wrong. Try $http.JSONP this pattern:

$scope.items = {}; // <-- initialize empty object

$http.jsonp('/someJSONUrl').
  success(function(data) {
    // this callback will be called asynchronously
    // when the response is available
    $scope.items = data; // <-- fill object with data
  });

You can't use $scope.items before it holds some data. That's why you have to initialize it first, as empty object/array then fill it with data and angular magic should do the rest :)

edited Mar 16, 2015 at 9:32

answered Mar 16, 2015 at 9:24

Piotr Dajlido

2,04017 silver badges28 bronze badges

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

4 Comments

aurelius Over a year ago

same behavior: TypeError: Cannot read property 'length' of undefined at Scope.$scope.groupToPages (localhost:8000/app/modules/app/phone/scripts/…) at Scope.$scope.search (localhost:8000/app/modules/app/phone/scripts/…) at new <anonymous> (localhost:8000/app/modules/app/phone/scripts/…) at invoke (localhost:8000/app/lib/js/angular.js:4185:17) at Object.instantiate ...

Piotr Dajlido Over a year ago

I have updated my answer, note that you can't use object that doesn't exist yet. this should work.

aurelius Over a year ago

ok, i see what you have done... and when the dom is loaded in the browser i end up with items = {}

Piotr Dajlido Over a year ago

it works, just wrap it into the controller callback and you are ready to go :)

Idham Perdameian · Accepted Answer · 2015-03-16 09:38:00Z

I just do something like this as mention in document and it work:

      $http.get('someUrl').
      success(function(data, status, headers, config) {
        // this callback will be called asynchronously
        // when the response is available
      }).
      error(function(data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
      });

Here the sample:

angular.module('myApp', [])
  .controller('JustCtrl', function($scope, $http) {
    $scope.ptis = [];
    // Simple GET request example :
    $http.get('https://gist.githubusercontent.com/idhamperdameian/239cc5a4dbba4488575d/raw/0a2ea4c6c120c9a8f02c85afcf7a31941ef74d3a/ptis.json').
    success(function(data, status, headers, config) {
      // this callback will be called asynchronously
      // when the response is available
      $scope.ptis = data;
    }).
    error(function(data, status, headers, config) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="JustCtrl">
  <span ng-repeat="p in ptis">
        {{p.name}}, {{p.description}}, etc...<br>
    </span>
</div>

Or you may prefer to this demo.

Collectives™ on Stack Overflow

Angular $http service does not load json file

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related