Question

您好我正在尝试让我的angularJs站点从位于js / data.json中的外部JSON文件中读取。它只适用于json文件在控制器脚本中...但是当我将它删除到data.json时......它不会读取它？当我在搜索栏上输入任何内容时......没有任何内容出现。它只适用于我在控制器中包含脚本，如：

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

为了简单起见，我只想将这两个文件分开。感谢。

我的控制器代码是否有错误？

感谢。

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

脚本（模块和控制器实际上都是单独的Js文件。为简单起见，我已将两者都包括在内）

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

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

这是位于js / data.json

中的外部json文件

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

如果我使用的话，JSON将不会解析：

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

我在浏览器控制台上一直收到错误：我认为这与控制器中的JSON PARSE有关。

 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)

Answer 1

我认为您需要在将数据分配给$ scope.persons

之前解析数据

将控制器代码更改为

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

Answer 2

您的json数据中有错误。

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

还使用JSON.parse(data)解析JSON数据。

Answer 3

我认为你正在解析它两次，$ http.get命令已经解析，所以不需要使用JSON.parse（data）;再次

这应解决您的令牌O错误

Angularjs不会从外部json文件读取

3 个答案: