Angular 1.6 $ http.get无法从json读取

我想从一个静态json文件中读取json数据，该文件用于在本地Web服务器上进行测试，但是无法使用$ http显示任何内容.get（）服务。我在这里查看了一些其他类似的问题，但所有被接受的答案说明了使用承诺方法的情况，但是在这些角度+ v1.6.x +这些已被折旧。

最初我试着在控制器内部的变量上设置我的json数据，并且一切正常，但是一旦我移动到JSON文件，什么都不显示。我的第一个错误是我没有意识到JSON文件的为ANSI格式，JSON.parse（）角度调用才能工作。在将文件编码切换为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 }} &mdash; {{ 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>

来源

2017-03-05 Eagl3

我注意到，您的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;

来源

2017-03-05 05:16:39

噢，那是一个整洁的网站！谢谢！看起来确实是这个问题。顺便说一下，我第一次尝试刷新我的应用程序页面后更新数据没有任何改变。必须先清除缓存。可能希望在你的回答中提出，以防将来有人遇到类似的问题。 **编辑：另外忘记我也改变了对response.data **的回应 – Eagl3

Angular 1.6 $ http.get无法从json读取

回答

相关问题