I am new to Angular JS, and am trying to call Rest API using JSON data. But when I run my HTTP-server, nothing is getting displayed. When I drop the response in console, am receiving the response.
Htmlcode :
<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 code:
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;
});
});
Expecting Response data :
{
"contactinfo" : [
{
"name" : "Jeremy Franke",
"location":"madrid , Unitedkingdom",
"phone" : 9874563210
},
{
"name" : "Jade Raymond",
"location":"portland , Netherland",
"phone" : 9874563210
},
{
"name" : "Franklin",
"location":"texas , UnitedStates",
"phone" : 9874563210
}
]
}
Please compare your solution with this demo fiddle carefully. Your approach is nice so there should be an other problem. Maybe you will be able to reproduce your problem while comparing your solution with this runnable code.
<!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>
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;
});
});