Question

我正在使用AngularJS将数据加载到我的html文件，而我的本地服务器是wamp服务器。但JSON文件中的记录未加载到index.html页面。

Index.html：

<head>
    <meta charset = "UTF-8">
    <title>AngularJS | $http Service</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <script src = "controller.js"></script>
</head>
<body ng-app = "mainApp">
    <div ng-controller = "people">
        <ul>
            <h2>Names and Age of Programmers in Colombo</h2>
            <li ng-repeat = "person in persons">
                {{ person.name + ' : ' + person.age }}
            </li>
        </ul>
    </div>
</body>

Controller.js：

var app = angular.module('mainApp', []); 
app.controller('people', function($scope, $http) {
  $http.get('http://localhost/angular/Tut16_httpService/database.json').success (function(response) {
    $scope.persons = response.records;
  }); 
});

database.json：

{
"records": [
    {
        "Name":"Mehul",
        "Age":"18"
    },
    {
        "Name":"Jai",
        "Age":"24"
    },
    {
        "Name":"Alex",
        "Age":"27"
    },
    {
        "Name":"Rahul",
        "Age":"30"
    }
] 
}

输出是：

任何帮助？

Answer 1

属性名称应与json文件相同。

转换此

{{ person.name + ' : ' + person.age }}

到这个

{{ person.Name + ' : ' + person.Age }}

Answer 2

<div ng-controller = "people">
        <ul>
            <h2>Names and Age of Programmers in Colombo</h2>
            <li ng-repeat = "person in persons.records">
                {{ person.Name + ' : ' + person.Age }}
            </li>
        </ul>
    </div>

plunker： - https://plnkr.co/edit/mRyRnovs2zpk5pMNjbaW?p=preview

祝你好运！ Simple Mistake Buddy观看它:-) !!

JSON文件中的数据未显示在html中

2 个答案: