CODEWITHSUNDEEP
javascriptjsonangularjs
Superunknown
Superunknown

Reputation: 501

Angularjs won't read from an external json file

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)

Upvotes: 1

Views: 924

Answers (3)

JSB
JSB

Reputation: 231

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

Upvotes: 0

Shreejibawa
Shreejibawa

Reputation: 1868

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).

Upvotes: 1

Ahmad
Ahmad

Reputation: 1931

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

Upvotes: 2

Related Questions