您好，我正在尝试让我的 angularJs 站点从位于 js/data.json 中的外部 JSON 文件读取数据。它仅在 json 文件位于 Controller 脚本中时才有效...但是当我将其删除到 data.json 时...它不会读取它？当我在搜索栏上输入任何内容时……什么也没有出现。它仅在我将脚本包含在 Controller 中时有效，例如:
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"
}, ]
});
为了简单起见，我只想将这两个文件分开。谢谢。
我的 Controller 代码有错误吗？
谢谢。
<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>
脚本(实际上模块和 Controller 都是单独的 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);
});
});
我在浏览器控制台上不断收到错误消息:我认为这与 Controller 中的 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)
最佳答案
我认为您需要在将数据分配给 $scope.persons 之前解析数据
将您的 Controller 代码更改为
personApp.controller('PersonListCtrl', function ($scope, $http) {
$http.get('data/persons.json').success(function (data) {
$scope.persons = JSON.parse(data);
});
});
关于javascript - Angularjs 不会从外部 json 文件中读取，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28761517/