I have a JSON array in a file data.json which is as :
var info = [{
"place": "Turkey",
"username": "jhon"
}, {
"place": "Dubai",
"username": "bruce"
}, {
"place": "Italy",
"username": "Wayne"
}];
I am able to access these using a loop and check with the help of an alert box.. However, I wish to display the contents in the form of a table. I could use JavaScript or as somebody suggested to me I could also use Angular.js. Any idea on what way I could get along with will be easier?
if you going to use angular just for displaying the JSON as a table, then it would be a overkill.
you can do it in plain javascript itself easily.
We can create each cell of the table with javascript and append it into a table dynamically.
function showInfo() {
var table = document.getElementById('info');
info.forEach(function(obj) {
var row = document.createElement('tr'),
col1 = document.createElement('td'),
col2 = document.createElement('td'),
place = document.createTextNode(obj.place),
username = document.createTextNode(obj.username);
col1.appendChild(place);
col2.appendChild(username);
row.appendChild(col1);
row.appendChild(col2);
table.appendChild(row);
});
document.body.appendChild(table);
}
Here is the sample fiddle
seems forEach is not supported in IE. here is another version which uses for loop instead of forEach construct
function showInfo() {
var table = document.getElementById('info');
for (var i=0; i< info.length; i++) {
var obj = info[i],
row = document.createElement('tr'),
col1 = document.createElement('td'),
col2 = document.createElement('td'),
place = document.createTextNode(obj.place),
username = document.createTextNode(obj.username);
col1.appendChild(place);
col2.appendChild(username);
row.appendChild(col1);
row.appendChild(col2);
table.appendChild(row);
}
document.body.appendChild(table);
}
Here is the updated sample fiddle
info var? if so, yes this will work...
expose a JSON? @AnbarasanYou can import the data with a script tag:
<script src="data.json"></script>
And then use angularjs to display the data:
<script>
angular.module('mainApp', [])
.controller('mainCtl', function($scope) {
$scope.info = info;
});
</script>
<div ng-app="mainApp" ng-controller="mainCtl">
<table border="1" width="300">
<tr><td>Place</td><td>Username</td></tr>
<tr ng-repeat="n in info">
<td>{{n.place}}</td>
<td>{{n.username}}</td>
</tr>
</table>
</div>
Here is how you could accomplish this with Angular, and here is a working plunker of the code below:
data.json
[
{
"place": "Turkey",
"username": "jhon"
},
{
"place": "Dubai",
"username": "bruce"
},
{
"place": "Italy",
"username": "Wayne"
}
]
Controller
app.controller('MainCtrl', function($scope, $http) {
$scope.info = null;
$http.get("data.json").success(function (data) {
$scope.info = data;
});
});
View
<body ng-controller="MainCtrl">
<table>
<tr>
<th>Place</th>
<th>Username</th>
</tr>
<tr ng-repeat="thing in info">
<td>{{thing.place}}</td>
<td>{{thing.username}}</td>
</tr>
</table>
</body>
you can solve easily by using angularjs:
in data.json:
[
{
"place": "Turkey",
"username": "jhon"
},
{
"place": "Dubai",
"username": "bruce"
},
{
"place": "Italy",
"username": "Wayne"
}
]
Controller:
angular.module('app', []).controller('SolutionController', ['$scope', '$http',
function($scope, $http) {
$http.get("data.json").then(function(infos) {
$scope.infos = infos;
}, function(error) {
$scope.infos = null;
});
}
]);
and view:
<body ng-controller="SolutionController">
<table>
<tr>
<th>Place</th>
<th>User Name</th>
</tr>
<tr data-ng-repeat="info in infos">
<td data-ng-bind="info.place"></td>
<td data-ng-bind="info.username"></td>
</tr>
</table>
</body>
