在 html 页面中使用 angularJS 显示 json 数据

Question

我正在尝试使用 angularJS 在 table 中显示 json 文件中的数据，但我得到空白页作为输出。代码如下。我有单独的 json 文件和单独的 js 文件，我在其中定义了 angular 控制器。当我运行应用程序时，我得到一个空白页作为输出。

查看：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="angularTable">
<head>
<title></title>
<link href="content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div role="main" class="container theme-showcase">
    <div class="" style="margin-top:90px">
        <div class="col-lg-8">
            <div class="page-header">
                <h2 id="tables">Searching,Sorting and Pagination in angularJS.</h2>
            </div>
            <div class="bs-component" ng-controller="listdata">
                <table class="table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Hobby</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="user in users">
                            <td>{{user.id}}</td>
                            <td>{{user.first_name}}</td>
                            <td>{{user.last_name}}</td>
                            <td>{{user.hobby}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>

</body>
</html>

app.js-

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

app.controller('listdata', function ($scope, $http) {

$scope.users = []; //declare an empty array

$http.get("mockJson/mock.json").success(function (response) {

    alert('');
    $scope.users = response; //ajax request to fetch data into $scope.data

    });

});

mock.json:-

[ { "id": 1, "first_name": "Jhon", "last_name": "show", "hobby": "Eating" },
{ "id": 2, "first_name": "Jhon2", "last_name": "show2", "hobby": "Eating2" },
{ "id": 3, "first_name": "Jhon3", "last_name": "show3", "hobby": "Eating3" },
{ "id": 4, "first_name": "Jhon4", "last_name": "show4", "hobby": "Eating4" },
{ "id": 5, "first_name": "Jhon5", "last_name": "show5", "hobby": "Eatin5" },
{ "id": 6, "first_name": "Jhon6", "last_name": "show6", "hobby": "Eating6" },
{ "id": 7, "first_name": "Jhon7", "last_name": "show7", "hobby": "Eating7" },
{ "id": 8, "first_name": "Jhon8", "last_name": "show8", "hobby": "Eating8" },
{ "id": 9, "first_name": "Jhon9", "last_name": "show9", "hobby": "Eating9" },
{ "id": 10, "first_name": "Jhon10", "last_name": "show10", "hobby": "Eating10" },
{ "id": 11, "first_name": "Jhon11", "last_name": "show11", "hobby": "Eating11" },
{ "id": 12, "first_name": "Jhon12", "last_name": "show12", "hobby": "Eating12" },
{ "id": 13, "first_name": "Jhon13", "last_name": "show13", "hobby": "Eating13" },
{ "id": 14, "first_name": "Jhon14", "last_name": "show14", "hobby": "Eating14" },
{ "id": 15, "first_name": "Jhon15", "last_name": "show15", "hobby": "Eating15" },
{ "id": 16, "first_name": "Jhon16", "last_name": "show16", "hobby": "Eating16" },
{ "id": 17, "first_name": "Jhon17", "last_name": "show17", "hobby": "Eating17" },
{ "id": 18, "first_name": "Jhon18", "last_name": "show18", "hobby": "Eating18" },
{ "id": 19, "first_name": "Jhon19", "last_name": "show19", "hobby": "Eating19" },
{ "id": 20, "first_name": "Jhon20", "last_name": "show20", "hobby": "Eating20" },
{ "id": 21, "first_name": "Jhon21", "last_name": "show21", "hobby": "Eating21" },
{ "id": 22, "first_name": "Jhon22", "last_name": "show22", "hobby": "Eating22" },
{ "id": 23, "first_name": "Jhon23", "last_name": "show23", "hobby": "Eating23" },
{ "id": 24, "first_name": "Jhon24", "last_name": "show24", "hobby": "Eating24" },
{ "id": 25, "first_name": "Jhon25", "last_name": "show25", "hobby": "Eating25" }]

Answer 1

我没有发现您的代码有任何问题，但对在正文而不是 html 标签上定义 ng-app 进行了轻微修改。

这是工作 plunker 相同的

<body>
<div role="main" class="container theme-showcase" ng-app="angularTable">
    <div class="" style="margin-top:90px">
        <div class="col-lg-8">
            <div class="page-header">
                <h2 id="tables">Searching,Sorting and Pagination in angularJS.</h2>
            </div>
            <div class="bs-component" ng-controller="listdata">
                <table class="table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Hobby</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="user in users">
                            <td>{{user.id}}</td>
                            <td>{{user.first_name}}</td>
                            <td>{{user.last_name}}</td>
                            <td>{{user.hobby}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</body>

修改您的 HTML <head> 标签，如下所示

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="angularTable">
<head>
<title></title>
<link href="content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>
</head>

根据 OP 的评论，问题出在 $http.get 方法，该方法使用 .success 函数，该函数在 1.6 版本中不再使用。

OP 可以回退到 <1.6 版本或使用 .then 函数进行成功回调

这是更新后的 plunker

当使用 .then 函数时，它具有与响应相关的所有对象，因此对于数据检索，我们应该使用 response.data

Answer 2

我认为问题出在 angular 版本上。 $http.get(...).success 在 angular 1.6

中被移除

尝试使用下面的方法，它使用了新语法

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

app.controller('listdata',function($scope,$http){

   $scope.users = [];

   $http.get("demo.json").then(function(response){
    $scope.users = response.data;
   });

});

在 html 页面中使用 angularJS 显示 json 数据

Displaying json data using angularJS in html page

angularjs

json

angular-controller