我是 Angular JS 的新手，正在尝试使用 JSON 数据调用 Rest API。但是当我运行我的 HTTP 服务器时，什么也没有显示。当我在控制台中删除响应时，我收到了响应。
HTML代码:
<html ng-app="myapp">
<head>
<div ng-controller="header">
<h1><center>{{apptitle}}</center></h1>
</div>
<div ng-controller="contactinfo">
<table class="table">
<thead>
<tr>
<th>Sl.No</th>
<th>Name</th>
<th>Address</th>
<th>Phno</th>
</tr>
</thead>
<tbody ng-repeat="info in contact">
<tr>
<th scope="row">1</th>
<td>{{ info.name }}</td>
<td>{{ info.location }}</td>
<td>{{ info.phone }}</td>
</tr>
<tr>
<th scope="row">2</th>
<td>{{ info.name }}</td>
<td>{{ info.location }}</td>
<td>{{ info.phone }}</td>
</tr>
</tr>
</tbody>
</table>
</div>
Angular 代码:
var app = angular.module('myapp',[]);
app.controller('header',function($scope){
$scope.apptitle = "Basic contacts App"
});
app.controller('contactinfo',function($scope,$http){
$http.get('http://localhost:3000/contactinfo')
.then(function(response){
console.log(response);
$scope.contact = response.data.contactinfo;
});
});
期望响应数据:
{
"contactinfo" : [
{
"name" : "Jeremy Franke",
"location":"madrid , Unitedkingdom",
"phone" : 9874563210
},
{
"name" : "Jade Raymond",
"location":"portland , Netherland",
"phone" : 9874563210
},
{
"name" : "Franklin",
"location":"texas , UnitedStates",
"phone" : 9874563210
}
]
最佳答案
请将您的解决方案与此 demo fiddle 进行比较 仔细。您的方法很好，所以应该还有其他问题。将您的解决方案与此可运行代码进行比较时，您也许能够重现您的问题。
查看
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.4.7/angular.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="header">
<h1><center>{{apptitle}}</center></h1>
</div>
<div ng-controller="contactinfo">-
<table class="table">
<thead>
<tr>
<th>Sl.No</th>
<th>Name</th>
<th>Address</th>
<th>Phno</th>
</tr>
</thead>
<tbody ng-repeat="info in contact">
<tr ng-repeat="info in contact">
<th scope="row">3</th>
<td>{{ info.name }}</td>
<td>{{ info.location }}</td>
<td>{{ info.phone }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
AngularJS 应用
var app = angular.module('myapp', []);
app.controller('header', function($scope) {
$scope.apptitle = "Basic contacts App"
});
app.controller('contactinfo', function($scope, $http) {
$http.get('./data.json')
.then(function(response) {
console.log(response);
$scope.contact = response.data.contactinfo;
});
});
关于javascript - 不显示 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46219963/