Question

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

这是我的'patient.json＆＃39;文件

[
{
    "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';
 }]);

这是我的＆＃39; index.html＆＃39;文件

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

我想我错过了什么。请提前帮助我。

Answer 1

你为什么使用jsonp。它不起作用jsonp是一个从不同的域源获取数据的工作，它的作用是在你的页面中创建一个javascript标记，这个javascript将加载一个你已在页面中定义的执行功能。所以返回json将不会执行该函数。不管用。

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

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

您的代码需要从Web服务器运行另外一件事。如果你创建了这个测试页面而你正试图从文件系统加载它，我的朋友你运气不好将永远不会工作。你不能对file：///

进行ajax调用

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

如果您使用的是体面的浏览器（其他IE浏览器），您可以使用非常可靠的良好调试工具来检查您的代码是否向服务器发出请求。并检查你得到了什么，包括标题特别是mime类型。如果您正在使用Windows，那么一个很棒的工具就是小提琴。

Answer 2

而不是$http.jsonp，请使用$http.get

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

查看此Plunkr

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

2 个答案: