如何从json文件中读取数据,是否存在语法错误



我正在启动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(。

最新更新