Javascript 如何使用angularJS在json文件中显示数据？_Javascript_Angularjs_Json

Javascript 如何使用angularJS在json文件中显示数据？

javascript angularjs json

Javascript 如何使用angularJS在json文件中显示数据？,javascript,angularjs,json,Javascript,Angularjs,Json,我正努力按照标题的建议去做。问题是，我的浏览器没有显示json文件中的任何内容。这应该是相当直接的，但我似乎不知道出了什么问题这是我的app.controller.js var app = angular.module('myApp', []); app.controller('appCtrl', function($scope, $http) { $http.get('data.json').success(function(data){ $scope.display

我正努力按照标题的建议去做。问题是，我的浏览器没有显示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>

首先，您需要重新排序脚本，以便它们按以下顺序加载。因此，在

角度库

之后加载

应用程序控制器

脚本，这很可能就是问题所在。因为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>

这两个更改应该可以解决您的问题

可选

您也可以考虑将您的<代码> NG重复>代码>转换成<代码> <代码>元素：

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;
    });
});

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


{{data.title}
{{data.abstract}
{{data.source}
{{data.publish{u time}

更改代码，如下所示

你能发布你的json结构吗？此外，您的视图也可能比响应返回的时间更早呈现。是否有错误？页面是什么样子的？我没有出错。我只是没有在json文件中获得我应该显示的信息，即使在我将“显示中的数据”中的数据设置为其他内容之后，它仍然不会在浏览器上打印任何内容。不是data.title，而是display.titleit仍然不能解决问题。没有显示任何内容。但是，我直接从server.js运行。是否可能是它导致了问题？我将把它包括在问题中。我也添加了第二个更改，但我的浏览器仍然没有显示我想要从json文件中获取的数据。我忘记了在更改后包含app.controller.js脚本的第二行，您应该能够在没有Node.js的情况下运行它，您应该能够在本地计算机上的浏览器中直接运行它是的，我也将第二行更改为myApp，但仍然没有显示任何内容。您的控制台中有任何错误吗？按[F12]按钮并重新加载页面。还有，您使用的是什么浏览器？我仍然无法显示来自JSON的数据。请在$scope.display=response.data行上放置一个断点int browser，并让我知道您在那里看到的值。我已使用可用的plunker代码更新了我的答案。

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

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;

  });

});