![](/img/trans.png)
[英]Load JSON content from a local file with http.get() in Angular 2
[英]Angular 1.6 $http.get unable to read from json
我正在嘗試從靜態json文件中讀取json數據,該文件用於在本地Web服務器上進行測試,但是使用$ http.get()服務無法顯示任何內容。 我在這里查看了其他一些類似的問題,但是所有接受的答案都涉及了promise方法的使用,但是在angularjs v1.6.x +上,這些問題已被淘汰 。
最初,我嘗試將json數據設置在控制器內部的變量上,並且一切正常,但是一旦移至JSON文件,便不會顯示任何內容。 我的第一個錯誤是,我不知道JSON.parse()角度調用必須能夠使用ANSI格式的JSON文件。 在將文件編碼切換為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文件包含一些錯誤。 這可能是相關的。
]
代替}
。 { "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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.