How to show json data in a table format retrieved from node.js server using Angular Js
Question
This is an index file I had made to display the json data though angular.js
<!DOCTYPE html>
<html>
<head>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src= “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>
</head>
<body>
<div ng-app=”” ng-controller=”blogController”>
<table>
<tr><td>Manger Id</td><td>Manger Name</td></tr>
<tr ng-repeat=”x in name”>
<td>{{ x.m_id }}</td>
<td>{{ x.name }}</td>
</tr>
</table>
</div>
<script>
function blogController($scope,$http) {
$http.get('http://localhost:3000/techgeek/v1/getEmployeeDetails')
.success(function(response) {
$scope.names = response;
console.log($scope.names);
});
}
</script>
</body>
</html>
I am unable to get the json data from nodejs server. I aslo attacted a secreen shout my json data genereated though nodejs sever . . The main problem with url. Thanks for your help in advance
1 answers
solution1
2 ACCPTED 2016-11-28 08:11:07
Here is the live for your problem. I have solved it using the local Json. You have made the following mistakes as below
- ng-repeat names should be there as you have $scope.names in your controller.
- x.name in the second column which is wrong as your json is having the x.m_name as the field.
- Also, I have a doubt if the node.js server and the angular application is running in the same port, else you might get CORS (Cross Origin Resource Sharing) error in the console which you have to fix it.
<tr><td>Manger Id</td><td>Manger Name</td></tr>
<tr ng-repeat="x in names track by $index">
<td>{{ x.m_id }}</td>
<td>{{ x.m_name }}</td>
</tr>
Update 1
You have a problem with the module as you have used ng-app="" in your code please fix it by using a module as below
var app = angular.module('plunker', []);
app.controller("",function(){
.....................
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.