如何使用angularJS在json文件中顯示數據？

我正在嘗試按標題提示進行操作。問題是，我的瀏覽器沒有顯示任何json文件。它應該相當直接，但我似乎無法知道哪裏出了問題。如何使用angularJS在json文件中顯示數據？

這裏是我的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結構的

我使用$節點server.js 這是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);

來源

2017-04-04 Kat

你可以發佈你的json結構嗎？也有可能您的視圖比響應返回 – Yaser

您提交錯誤更快？頁面看起來像什麼？ – Jpsh

我沒有收到錯誤。即使在將「顯示中的數據」中的數據設置爲其他內容之後，我仍然不會在json文件中獲取我應該顯示 – Kat

代碼運行代碼

首先，您需要重新排序腳本，以便按以下順序加載腳本。因此，您的app controller腳本在Angular library之後加載，這很可能是問題所在。由於Angular在您嘗試使用它向您發送ajax請求之前未加載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腳本，你需要命名你ng-app同樣的事情，這樣你module變量：

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>

來源

2017-04-04 22:21:08 Jpsh

它仍然不能解決問題。沒有顯示。不過，我直接從server.js運行。它是否有可能導致問題？我將把它包含在問題中。 – Kat

我還添加了第二個更改，但我的瀏覽器仍然不顯示我想要從json文件中獲取的數據。 – Kat

我忘了在更改後包含app.controller.js腳本的第二行，您應該可以使用out節點運行它。js，你應該可以在你的計算機上直接在本地瀏覽器上運行它 – Jpsh

更改代碼類似下面。 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; 

    }); 

});

來源

2017-04-04 23:13:21 Kalyan

我仍然不能顯示json的數據 – Kat

把一個斷點int瀏覽器放在$ scope.display = response.data行，並讓我知道你在那裏看到的值 – Kalyan

我已經用一個工作的plunker代碼更新了我的答案。 – Kalyan

如何使用angularJS在json文件中顯示數據？

回答

相關問題