我正在尝试从静态 json 文件中读取 json 数据，该文件用于在本地 Web 服务器上进行测试，但使用 $http.get() 服务无法显示任何内容。我在这里查看了其他一些类似的问题，但所有接受的答案都考虑了 promise 方法的使用，但是在 angularjs v1.6.x+ 上，这些答案已被贬值。
最初，我尝试在 Controller 内部的变量上设置 json 数据，一切正常，但是一旦我移动到 JSON 文件，就什么也没有显示。我的第一个错误是我不知道 JSON 文件必须采用 ANSI 格式，以便 JSON.parse() Angular 调用能够工作。在将文件编码切换为 ANSI 之前，我遇到语法错误，但我的 json 结构是正确的。 (某些文本编辑器(例如 Dreamweaver)会创建 UTF-8 格式的 JSON 文件)。
此时，当我检查网页时，控制台上没有任何 JS 错误，但根本没有数据显示。这是我所拥有的: 我的 events.json
[
{
"day" : "Monday",
"objective" : "Pipeline",
"sessions" : [
{
"title" : "Leadership Excellence Luncheon",
"start" : "11:30am",
"end" : "1:00pm",
"location": "room A"
},
{
"title" : "Veteran Resume Workshop",
"start" : "1:15pm",
"end" : "2:00pm",
"location": "room B",
"speakers" : [
{
"name": "John Doe",
"title": "Analyst",
"company": "Appel",
"headshot" : "http://placehold.it/119x134.jpg",
"bio": "john-doe/",
},
{
"name": "Jane Doe",
"title" : "VP",
"company": "Lancer",
"headshot" : "http://placehold.it/119x134.jpg",
}
]
}
]
},
{
"day" : "Tuesday",
"objective" : "Pipeline",
"sessions" : [
{
"title" : "Leadership Excellence Luncheon",
"start" : "11:30am",
"end" : "1:00pm",
"location": "room A"
},
{
"title" : "Veteran Resume Workshop",
"start" : "1:15pm",
"end" : "2:00pm",
"location": "room B",
"speakers" : [
{
"name": "John Doe",
"title": "Analyst",
"company": "Appel",
"headshot" : "http://placehold.it/119x134.jpg",
"bio": "john-doe/",
},
{
"name": "Jane Doe",
"title" : "VP",
"company": "Lancer",
"headshot" : "http://placehold.it/119x134.jpg",
}
]
}
]
}
}
这是我的 app.js
(function() {
var app = angular.module('Agendas',[]);
app.controller('TableController', ['$scope', '$http',
function($scope,$http) {
$scope.title = "test";
$scope.events = [];
$http({
method: 'POST',
url: 'http://localhost/ang/data/events.json',
}).then( function(response) {
$scope.events = response;
});
}]);
})();
这是我的index.html
<!doctype html>
<html>
<head>
.....
</head>
<body>
....
<div id="agenda" class="mainCont container-fluid well" ng-app="Agendas" ng-controller="TableController">
<div id="day" ng-repeat="event in events">
<h1>{{ event.day }} — {{ event.objective }}</h1>
<div id="sess" ng-repeat="session in event.sessions">
<div style="width: 140px; float: left; clear: left;">{{ session.start }} - {{ session.end }}<br><br><em>Location: {{ session.location }}</em></div> <div style="float: left;"><em>{{ session.title }}</em> <br>
<div class="panelist" ng-repeat="speaker in session.speakers"><img ng-src="{{ speaker.headshot }}"><br>
<a ng-href="{{ speaker.bio }}">{{ speaker.name }}</a><br>
{{ speaker.title }} <br>
{{ speaker.company }}</div>
</div>
</div>
<div class="aghr"></div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
最佳答案
我注意到您的 JSON 文件包含一些错误。可能有关系。
- 结束标签应该是结束数组的标签。
]而不是}. - JSON 对象的最后一个字段不应包含逗号。例如:
{
"name": "John Doe",
"title": "Analyst",
"company": "Appel",
"headshot" : "http://placehold.it/119x134.jpg",
"bio": "john-doe/", <--- remove comma
}
您可以使用网站 jsonlint验证您的 JSON。
** 正如建议的，您可能必须先清除浏览器缓存。
** 另外更改
$scope.events = response;
至
$scope.events = response.data;
关于javascript - Angular 1.6 $http.get 无法读取 json，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42604699/