使用AngularJS $ http控件无法读取json数据

-1

我有一个非常简单的程序，它从位于与HTML文件相同的文件夹中的JSON文件（data.txt）中读取数据。但是程序无法读取这个文件，这里是生成的浏览器输出。

浏览器输出

Name     Roll No     Percentage 
{{ student.Name}} {{ student.RollNo}}  {{ student.Percentage}}

main.html中

<!doctype html> 
<html> 
    <head> 
     <title>AngularJS Ajax</title> 
     <style> 
      table, th , td { 
       border: 1px solid grey; 
       border-collapse: collapse; 
       padding: 5px; 
      } 
      table tr:nth-child(odd) { 
       background-color: #f2f2f2; 
      } 
      table tr:nth-child(even) { 
       background-color: #ffffff; 
      } 
     </style> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
     <script> 
      var mainApp = angular.module("mainApp", []); 
      mainApp.controller('studentController', function ($scope, $http) { 
       var url = "data.txt"; 
       $http.get(url).success(function (response) { 
        $scope.students = response; 
       }); 
      } 
     </script> 
    </head> 
    <body> 
     <h2>AngularJS Ajax</h2> 
     <div ng-app="mainApp" ng-controller="studentController"> 
      <table> 
       <tr> 
        <th>Name</th> 
        <th>Roll No</th> 
        <th>Percentage</th> 
       </tr> 
       <tr ng-repeat="student in students"> 
        <td>{{ student.Name }}</td> 
        <td>{{ student.RollNo }}</td> 
        <td>{{ student.Percentage }}</td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

的data.txt

[ 
    { 
     "Name" : "Mahesh Parashar", 
     "RollNo" : 101, 
     "Percentage" : "80%" 
    }, 
    { 
     "Name" : "Dinkar Kad", 
     "RollNo" : 201, 
     "Percentage" : "70%" 
    }, 
    { 
     "Name" : "Robert", 
     "RollNo" : 191, 
     "Percentage" : "75%" 
    }, 
    { 
     "Name" : "Julian Joe", 
     "RollNo" : 111, 
     "Percentage" : "77%" 
    } 
]

来源

2015-10-02 user2325154

什么是错误，检查控制台 –

@Ali - 感谢您的想法。检查控制台后发现问题。在控制器功能中丢失了括号和分号。 – user2325154

你所得到的一个txt文件的内容，它很可能被解释为一个字符串，所以你设置学生一些字符串。

相反，尝试：

$http.get(url).success(function (response) { 
    $scope.students = JSON.parse(response); 
});

更新：

现在我想想，应该不会响应有数据属性？

$http.get(url).success(function (response) { 
    $scope.students = response.data; 
});

来源

2015-10-02 21:06:18

试了两个。不工作：（ – user2325154

使用AngularJS $ http控件无法读取json数据

回答

相关问题