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>

Try it »

If you run the above example it will produce output something like this –

AngularJs Get Data From Json File


Advertisements

Add Comment

📖 Read More