2017-04-04 6 views
0

私はタイトルとして提案しようとしています。問題は、ブラウザがjsonファイルから何も表示していないことです。それはかなりすぐにすべきですが、私は何がうまくいかなかったのか分からないようです。jsonファイルにangularJSを使ってデータを表示する方法は?

は、ここに私のapp.controller.js

var app = angular.module('myApp', []); 
app.controller('appCtrl', function($scope, $http) { 
    $http.get('data.json').success(function(data){ 
     $scope.display = data; 
    }); 
}); 

であると私は別のHTMLファイルに

<html ng-app ="myApp"> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <script type='text/javascript' src="bower_components/angular/angular.js" charset="UTF-8"></script> 
     <script type='text/javascript' src="app/app.controller.js" charset="UTF-8"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
    </head> 
    <body ng-controller="appCtrl"> 
     <h2> Message Display </h2> 
      <table> 
       <tr> 
        <th> Title </th> 
        <th> abstract </th> 
        <th> source </th> 
        <th> publihsed time </th> 
       </tr> 
       <tr ng-repeat = "item in display"> 
        <td> {{item.title}} </td> 
        <td> {{item.abstract}} </td> 
        <td> {{item.source}} </td> 
        <td> {{item.publish_time}} </td> 
       </tr> 
      </table> 

    </body> 
</html> 

を持っていると私は、各ファイルが正しいディレクトリにあることを確認しました。しかし、右のブラウザはタグのみにJSON構造の enter image description here

スクリーンショットenter image description here

が表示されていない私は、これはserver.js

var express = require('express'); 
var app = express(); 

app.use(express.static(__dirname)); 

app.get('/', function(req, res){ 
    res.redirect('/index.html'); 
}); 

app.listen(8080); 
+0

json構造を投稿できますか?また、応答が返ってくるより早くあなたのビューがレンダリングされる可能性があります – Yaser

+0

エラーが発生していますか?ページはどのように見えるのですか? – Jpsh

+0

エラーは発生していません。私はちょうど私が – Kat

答えて

0
するためのコードで$ノードserver.js を使用してコードを実行します

まず、スクリプトの順序を変更して、以下の順序でロードする必要があります。あなたのapp controllerスクリプトがAngular libraryの後に読み込まれるように、これはおそらく問題です。あなたがajaxリクエストをするためにそれを使用する前にAngularがロードされないので、json.data。あなたの中に

<script type='text/javascript' src="bower_components/angular/angular.js" charset="UTF-8"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
<script type='text/javascript' src="app/app.controller.js" charset="UTF-8"></script> 

Secondluはapp controllerスクリプトあなたは、このようなあなたのmodule変数としてあなたng-app同じことに名前を付ける必要があります。

myApp = angular.module('myApp', []); 
myApp.controller('appCtrl', function($scope, $http) { 
     $http({ 
      type:"GET", 
      headers: { 
       "Accept": "application/json;charset=utf-8", 
       "Accept-Charset":"charset=utf-8" 
      }, 
      dataType:"json", 
      url:"data.json", 
     }).then(function success(response){ 
      $scope.display =response.data; 
    }); 
}); 

これら二つの変更はあなたの問題を解決する必要があります。

オプション

あなたはまた、あなたのng-repeatこのような要素<tbody>への移行を検討ことがあります。以下のような

<tbody ng-repeat="data in display"> 
    <tr> 
     <td> {{data.title}} </td> 
     <td> {{data.abstract}} </td> 
     <td> {{data.source}} </td> 
     <td> {{data.publish_time}} </td> 
    </tr> 
</tbody> 
+0

それでも問題は解決しません。何も表示されません。しかし、私はserver.jsから直接実行しています。問題を引き起こしている可能性はありますか?私は質問にそれを含めます。 – Kat

+0

私は2番目の変更も追加しましたが、私のブラウザはjsonファイルから必要なデータを表示しません。 – Kat

+0

変更の後にapp.controller.jsスクリプトの2行目を追加するのを忘れてしまいました。jsの場合は、コンピュータのローカルブラウザで直接実行できるはずです – Jpsh

0

変更あなたのコードの何か。 here is my working plunker

app.service('dataService',function($http){ 

    this.getdata = function(){ 
     return $http.get('data.json'); 

    }; 

}); 

app.controller('MainCtrl', function($scope,dataService) { 
    $scope.name = 'World'; 

    $scope.display =[]; 

    dataService.getdata() 
    .then(function(repsonse){ 
    $scope.display =repsonse.data; 

    }); 

}); 
+0

まだjsonのデータを表示できません – Kat

+0

$ scope.display = response.data行にブレークポイントintブラウザを置き、そこに表示されている値を教えてください – Kalyan

+0

作業中のプランナーコードで自分の答えを更新しました。 – Kalyan

関連する問題