使用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數據

回答

相關問題