Angularjs won't read from an external json file

Question

Hi I'm trying to get my angularJs site to read from an external JSON file located in js/data.json. it only works if the json file is in the controller script...but when I remove it to data.json...it won't read it? When I type in anything on the search bar...nothing comes up. It only works when I include the script in the controller like:

personApp.controller('PersonListCtrl', function ($scope, $http) {
    $http.get('data/persons.json').success(function (data) {
        $scope.persons = data;
    });
    $scope.persons = [{
        "name": "Mike Doe"
    }, {
        "name": "Jhon Doe"
    }, {
        "name": "Sam Doe"
    }, {
        "name": "Sam Doe"
    }, ]
});

I just want the two files to be separate for simplicity. Thanks.

Is there an error in my controller code?

Thanks.

<body ng-app="personApp">
    <div class="container">
        <header></header>
        <div ng-controller="PersonListCtrl">
            <div class="bar">Search:
                <input ng-model="query">
            </div>
            <ul class="" ng-show="query">
                <li ng-repeat="person in persons | filter:query">{{person.name}}</li>
            </ul>
        </div>
    </div>
</body>

script(really both module and controller are separate Js files. I've included both for simplicity)

var personApp = angular.module('personApp', []);

personApp.controller('PersonListCtrl', function ($scope, $http) {
    $http.get('js/data.json').success(function (data) {
        $scope.persons = data;
    });
});

and this is the external json file located in js/data.json

 [{
    "name": "Mike Doe"
}, {
    "name": "Jhon Doe"
}, {
    "name": "Sam Doe"
}, {
    "name": "Sam Doe"
}, ]

The JSON won't parse if I use:

personApp.controller('PersonListCtrl', function ($scope, $http) {
    $http.get('data/persons.json').success(function (data) {
        $scope.persons = JSON.parse(data);
    });
});

and I keep getting an error on the browser console: I think it's to do with the JSON PARSE in controller.

 SyntaxError: Unexpected token o
    at Object.parse (native)
    at http://172.31.1.17/js/controllers/controllers.js:229:31
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js:80:486
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js:111:425
    at k.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js:125:305)
    at k.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js:122:398)
    at k.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js:126:58)
    at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js:81:275)
    at N (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js:85:364)
    at XMLHttpRequest.w.onload (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js:86:394)

Ahmad · Accepted Answer · 2015-02-27 09:29:36Z

2

I think you need to parse data before assigning it to $scope.persons

Change your controller code to

personApp.controller('PersonListCtrl', function ($scope, $http) {
    $http.get('data/persons.json').success(function (data) {
        $scope.persons = JSON.parse(data);
    });
});

answered Feb 27, 2015 at 9:29

Ahmad

1,88113 silver badges24 bronze badges

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

12 Comments

Superunknown Over a year ago

Thank you. I made the changes based on your recommendations but got an error in the console? Says there's an error with: $scope.persons = JSON.parse(data); });

Superunknown Over a year ago

SyntaxError: Unexpected token o at Object.parse (native) at 172.31.1.17/js/controllers/controllers.js:229:31

Ahmad Over a year ago

Just remove the extra semicolon in the array

Superunknown Over a year ago

I have removed the semi colon in the array. Still getting errors.

Ahmad Over a year ago

Does console.log(data) returns a string or object?

|

Shreejibawa · Accepted Answer · 2015-02-27 09:31:23Z

1

You have error in your json data.

[{
    "name": "Mike Doe"
}, {
    "name": "Jhon Doe"
}, {
    "name": "Sam Doe"
}, {
    "name": "Sam Doe"
}]; // <-- REMOVE SEMICOLON

Also parse JSON data using JSON.parse(data).

answered Feb 27, 2015 at 9:31

Shreejibawa

1,8681 gold badge28 silver badges38 bronze badges

2 Comments

Superunknown Over a year ago

Thanks, I've done the above but keep getting errors.

Superunknown Over a year ago

Thanks , that's a good site. Seems that my JSON file is ok. I think it's the controller that's causing the problems/

JSB · Accepted Answer · 2015-02-27 11:15:02Z

0

I think you are parsing it twice , the $http.get command already parses so no need to use JSON.parse(data); again

this should resolve your token O error

edited Feb 27, 2015 at 11:15

answered Feb 27, 2015 at 11:02

JSB

2312 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angularjs won't read from an external json file

3 Answers 3

12 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related