如何使用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文件中显示数据？

回答

相关问题