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

I am trying to read the json data from a static json file that I have for testing on a local web server but I cannot get anything to show up with using the $http.get() service. I looked at a few other similar questions here but all accepted answers account for use of the promise methods, however on the angularjs v1.6.x+ these have been depreciated.

我试图从我在本地Web服务器上测试的静态json文件中读取json数据,但是使用$ http.get()服务无法显示任何内容。我在这里查看了一些其他类似的问题但是所有接受的答案都考虑了promise方法的使用,但是在angularjs v1.6.x +上这些已被折旧。

Initially I tried setting my json data on a variable inside of the controller, and everything worked fine, however once I moved to a JSON file nothing shows up. My first error was that I was unaware the JSON file has to be in ANSI format for the JSON.parse() angular calls to be able to work. Before switching the file encoding to ANSI I was getting syntax errors and my json structure was correct. (some text editor like Dreamweaver will create JSON files in UTF-8 format).

最初我尝试在控制器内部的变量上设置我的json数据,一切正常,但是一旦我移动到JSON文件,就没有任何显示。我的第一个错误是我不知道JSON文件必须是ANSI格式才能使JSON.parse()角度调用能够工作。在将文件编码切换为ANSI之前,我遇到语法错误,我的json结构是正确的。 (像Dreamweaver这样的文本编辑器将以UTF-8格式创建JSON文件)。

At this point when I inspect the webpage there are no JS errors on the console whatsoever, however no data shows up at all. Here is what I have: My events.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",
                }
            ]
           }
          ]
        }
      }

Here is my app.js

这是我的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;
       });

    }]);

 })();

Here is my index.html

这是我的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>

1 个解决方案

#1

I noticed that your JSON file contains some errors. It could be related.

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

The ending tag should be one to close the array. ]instead of }.

结束标记应该是一个关闭数组。 ]代替 }。

The last field of a JSON object should not have a comma. E.g.:

JSON对象的最后一个字段不应该有逗号。例如。:

{ "name": "John Doe", "title": "Analyst", "company": "Appel", "headshot" : "http://placehold.it/119x134.jpg", "bio": "john-doe/", <--- remove comma }

{“name”:“John Doe”,“title”:“Analyst”,“company”:“Appel”,“headshot”:“http://placehold.it/119x134.jpg”,“bio”:“john -doe /“,<---删除逗号}

You can use a website as jsonlint to validate your JSON.

您可以将网站用作jsonlint来验证您的JSON。

** As suggested, you might have to clear the browser cache first.

**根据建议,您可能必须先清除浏览器缓存。

** Additionally change

**另外更改

$scope.events = response;

$scope.events = response.data;

#1