AngularJs Get Data From Json File
AngularJs Get Data From Json File : It is very common to get data from json file while working with AngularJs. Here in this tutorial we are going to explain how you can get data from json file. You can also use our online demo to get the data from the json file.
AngularJs Get Data From Json File
Let us first have overview on json file.
Json File
Json file is basically data exchange lightweight file. Here we have created a simple json file which contains the data in below format –
AngularJs Get Data From Json File Example:
{"users":[{"id":"1","name":"John","email":"johnk@yopemail.com","phone":"121323232"},{"id":"2","name":"Kelly","email":"kellyk@yopemail.com","phone":"121212122"},{"id":"3","name":"Ryan","email":"ryank@yopemail.com","phone":"22222212"},{"id":"4","name":"Kojo","email":"kojao@yopemail.com","phone":"12144444"},{"id":"5","name":"Kinjal","email":"kinjal@yopemail.com","phone":"22555212"},{"id":"6","name":"Jonny","email":"jonny@yopemail.com","phone":"121334444"},{"id":"7","name":"Barak","email":"barak@yopemail.com","phone":"2444444512"},{"id":"8","name":"Uman","email":"uman@yopemail.com","phone":"12334444"}]}
|
You view the json data on the url – View Json File
Now we are going to read this json file using the AngularJs http get method.
Read Json File in AngularJS
Here we are going to describe this in two parts – Html and Js . Let us go step by step-
JavaScript Part
JavaScript part contains simple $http GET method to read the data from the given JSON Url.
AngularJs Get Data From Json File Example:
<script>
var app = angular.module('userApp', []);
app.controller('userController', function($scope, $http) {
$http.get("http://runtest.tutorialsplane.com/json/getUsers.php")
.success(function(response) {$scope.usersData = response.users;});
});
</script>
|
Where http://runtest.tutorialsplane.com/json/getUsers.php is the JSON File url. Pass your JSON file url to get the data.
Html Part
Now let us display the data pulled from JSON URL.
AngularJs Get Data From Json File Example:
<div ng-app="userApp" ng-controller ="userController">
<table id="searchResults">
<tr><th>Id</th><th>Name</th></tr>
<tr ng-repeat="data in usersData">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
</tr>
</table>
</div>
|
On the same way you can get other fields from the JSON file.
Complete Code
Here is the full code of the example –
AngularJs Read Data From Json URL/File Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
var app = angular.module('userApp', []);
app.controller('userController', function($scope, $http) {
$http.get("http://runtest.tutorialsplane.com/json/getUsers.php")
.success(function(response) {$scope.usersData = response.users;});
});
</script>
</head>
<body>
<div ng-app="userApp" ng-controller ="userController">
<table id="searchResults">
<tr><th>Id</th><th>Name</th></tr>
<tr ng-repeat="data in usersData">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
</tr>
</table>
</div>
</body>
</html>
|
If you run the above example it will produce output something like this –
Advertisements
