我正在启动angularJS,我想学习如何从json文件中读取,但我不知道我的代码中的问题是
因此,我试图在
标记内将json文件中的数据显示到视图中,但它显示为空白。
app.js:
//Routing
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'myController'
})
// some routing
//some more routing
;
}]);
//Routing end
myApp.controller('myController',function($scope, $http){
$http.get("data/users.json").then(function(response){
$scope.users = response.data;
});
});
view1.html:
<div class="content">
<h1 class="princip">Reparation</h1>
<hr>
<div>
<p>user: {{user.name}} </p>
</div>
</div>
users.json:
[{
"name": "yoshi",
"code": "black",
"id": 101,
}, {
"name": "minato",
"code": "orange",
"id": 102,
}]
index.html:
<!DOCTYPE html>
<html lang="en" ng-app ="myApp">
<head>
<script src="classclass.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="applibangular-route.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="appapp.js"></script>
<title>Wellcome !</title>
</head>
<body>
<header ng-include="'header.html'"></header>
<div ng-include="'sidebar.html'"></div>
<main ng-view=""></main>
</body>
</html>
我的文件系统:
-Project
index.html
-app
app.js
-data
users.json
-views
view1.html
有语法错误吗?
$scope.users似乎得到了一个由[]包围的用户数组
因此,您的{{user.username}}必须以某种方式理解它正在获取其中一个数组元素。我希望在这里对数组进行某种迭代,因此{{user}}可以理解为$scope.users.中的一个项
另一件事是,数组中的第一个用户具有名为name的属性,而第二个用户具有一个名为username的属性,因此只有第二个可以工作(对于第一个用户,您的代码将假设user.username值为null(。