无法从 angularjs 中的 json 文件中获取数据？答案

【问题标题】：unable to fetch data from json file in angularjs?无法从 angularjs 中的 json 文件中获取数据？
【发布时间】：2014-04-05 08:04:52
【问题描述】：

我是 angularjs 的新手，我正在尝试从我的 json 文件中加载数据。 json 文件有一些患者列表。但在我的视图中没有显示

这是我的“患者.json”文件

[
{
    "id": 0, 
    "first_name": "John", 
    "last_name": "Abruzzi", 
    "middle_name": "Kewan",
    "DOB": "12/03/1935", 
    "ssn": "254-2342-42",
    "sex" : "Male",
    "country" : "USA",
    "city" : "Greater New York",
    "phone" : "1234124822",
    "military_branch" : "Army",
    "zip" : "08675",
    "guid" : ""
}, 
 {
    "id": 1, 
    "first_name": "Peter", 
    "last_name": "Burk", 
    "middle_name": "S",
    "DOB": "31/06/1945", 
    "ssn": "342-9876-54",
    "sex" : "Male",
    "country" : "USA",
    "city" : "New York",
    "phone" : "3346573924",
    "military_branch" : "FBI",
    "zip" : "25643",
    "guid" : ""
  }, 

 {
    "id": 2, 
    "first_name": "Neal", 
    "last_name": "caffery", 
    "middle_name": "Sam",
    "DOB": "28/02/1988", 
    "ssn": "420-4204-20",
    "sex" : "Male",
    "country" : "USA",
    "city" : "New York",
    "phone" : "676554323",
    "military_branch" : "Air Force",
    "zip" : "26531",
    "guid" : ""
  },
  ]

这是我的controller.js

var patientApp = angular.module('patientApp', []);

 patientApp.controller('PatientListCtrl',['$scope','$http', function ($scope, $http) {
$http.jsonp('/json/patients.json').success(function (data) {
    $scope.patients = data;
 })
 });
 $scope.orderProp = 'id';
 }]);

这是我的“index.html”文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="patientApp">
<head>
<title>Patient Management</title>
<script src="js/angular.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body data-ng-controller="PatientListCtrl">
<table>
    <thead>
        <tr>ID</tr>
        <tr>First Name</tr>
        <tr>Last Name</tr>
        <tr>SSN</tr>
        <tr>DOB</tr>
    </thead>
</table>
<div data-ng-repeat="patient in patients">
    <table>
        <tr>{{patient.id}}</tr>
        <tr>{{patient.last_name}}</tr>
        <tr>{{patient.first_name}}</tr>
        <tr>{{patient.SSN}}</tr>
        <tr>{{patient.DOB}}</tr>
    </table>
</div>  
</body>
</html>

我想我错过了一些东西。请帮助我，在此先感谢。

【问题讨论】：

执行 console.log($scope.patients) 会得到什么

标签： javascript html json angularjs

【解决方案1】：

你为什么使用 jsonp。它不起作用 jsonp 是一种从不同域源获取数据的解决方法，它的作用是在您的页面中创建一个 javascript 标记，此 javascript 将加载执行您已经在页面中定义的函数。所以返回 json 不会执行函数。不管用。

http://en.wikipedia.org/wiki/JSONP

看起来您没有不同域请求的问题，因为您尝试访问的 url 是 /json/patiens.json 所以我可以假设您正在尝试从同一个域加载它。如果是这样的话 $http.get 就是要走的路。

您的代码还需要从网络服务器运行。如果你创建了这个测试页面并且你试图从文件系统中加载它，我的朋友你运气不好将永远不会工作。您不能对文件进行 ajax 调用：///

如果您从 Web 服务器运行它，请检查 mime 类型。可能是响应头中的 mime 类型不正确，浏览器无法解析文档。

如果您使用的是不错的浏览器（除 IE 之外的任何浏览器），您就有非常可靠的调试工具检查您的代码是否正在向服务器发出请求。并检查你得到了什么，包括特别是 mime 类型的标题。如果您使用的是 Windows，那么一个很棒的工具就是小提琴。

【讨论】：

【解决方案2】：

用$http.get代替$http.jsonp

$http.get('/json/patients.json').success(function (data) {
   $scope.patients = data;
});

看看这个Plunkr

【讨论】：

我找到了那个 plunker，显示文件的数据，但是当我在我的机器上尝试时它没有显示单个记录。