我正在启动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="class\class.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app\lib\angular-route.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="app\app.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有语法错误吗？
1条答案
按热度按时间acruukt91#
似乎$scope.users获得了一个用户数组，由[]括起
所以您的{user.username}必须以某种方式理解它正在获取一个数组元素。我希望在这里对数组进行某种形式的迭代，因此{{user}}可以理解为$scope.users中的一项。
另一件事是数组中的第一个用户有一个名为name的属性，而第二个用户有一个名为username的属性，因此只有第二个用户可以工作（对于第一个用户，您的代码将假定user.username值为null）。