2017-03-05 4 views
0

ローカルWebサーバーでテストするための静的なjsonファイルからjsonデータを読み取ろうとしていますが、$ httpを使用して表示されるものは何も得られません.get()サービス。私はここにいくつかの同様の質問を見ましたが、すべての回答がpromiseメソッドの使用を説明していますが、anglejsではv1.6.x+これらは減価償却されています。

最初は、コントローラー内の変数に自分のjsonデータを設定しようとしましたが、すべて正常に機能しましたが、JSONファイルに移動しても何も表示されません。私の最初のエラーは、私がJSONファイルがであり、JSON.parse()角度呼び出しが機能するためにはANSI形式であることを知らなかったということでした。ファイルのエンコーディングをANSIに切り替える前に、構文エラーが発生していました.Jsonの構造は正しいです。 (Dreamweaverのようなテキストエディタでは、JSONファイルをUTF-8形式で作成します)。

この時点で、Webページを調べるとコンソールに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", 
       } 
      ] 
      } 
      ] 
     } 
     } 

がここにここに私のindex.htmlは、私はあなたのJSONファイル気づい

<!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> 

答えて

0

である私の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; 
     }); 

    }]); 

})(); 

ですいくつかのエラーがあります。それは関連する可能性があります。

  1. 終了タグは、配列を閉じるために1にする必要があります。 }の代わりに]です。
  2. JSONオブジェクトの最後のフィールドにはカンマを使用しないでください。例えば:

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

あなたはJSONを検証するためにjsonlintとしてウェブサイトを使用することができます。

**まず、ブラウザのキャッシュをクリアする必要があります。

**またああそれはきちんとしたウェブサイトです

$scope.events = response.data; 
+0

$scope.events = response; 

を変更!ありがとう!それは本当に問題だったようだ。ところで、初めてデータを更新した後にアプリページを更新してみましたが、何も変わりませんでした。まずキャッシュをクリアしなければならなかった。将来の誰かが同様の問題を抱えている場合に備えて、あなたの答えにそれを示唆したいかもしれません。 **編集:また、私はresponse.dataへの応答も変更したことを忘れてしまった** – Eagl3

関連する問題