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

【问题标题】：Angular 1.6 $http.get unable to read from jsonAngular 1.6 $http.get 无法从 json 读取
【发布时间】：2017-03-05 04:59:17
【问题描述】：

我正在尝试从静态 json 文件中读取 json 数据，该文件用于在本地 Web 服务器上进行测试，但使用 $http.get() 服务无法显示任何内容。我在这里查看了其他一些类似的问题，但所有接受的答案都说明了使用 promise 方法，但是在 angularjs 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>

【问题讨论】：

标签： javascript angularjs json http

【解决方案1】：

我注意到您的 JSON 文件包含一些错误。可能是相关的。

结束标记应为 1 以关闭数组。 ]而不是}。
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;

【讨论】：

哦，这是一个整洁的网站！谢谢！看来这确实是问题所在。顺便说一句，我第一次尝试在更新数据后刷新我的应用程序页面时没有任何改变。必须先清除缓存。可能还想在您的答案中提出建议，以防将来有人遇到类似问题。 编辑：另外忘记了我也改变了对 response.data 的响应