How To Retrieve json Data In Angularjs
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Amruta
In this tutorial we will show you the solution of how to retrieve json data in angularjs, for retrieve json data we need to use available service in angularjs here we used $http.
$http is an angulajs service for reading data from remote servers. The $http is a core angularjs service that is used to communicate with the remote HTTP service via browsers XMLHttpRequest object or via JSONP. Using $http service we fetching our json data and displayed on html table.
Step By Step Guide On How To Retrieve json Data In Angularjs :-
In our application we defined our app and controller with html table with respect of json data for showing retrieved result on webpage.
Our json data contain students (ID, Name) so we created two columns in our table with row will be based on json data length.
In controller using $http service we communicate with json file then server returns json data to client side as a response. Using response we can display all json data in html table row by row.
<!DOCTYPE HTML>
<html>
<head>
<title>retrieve json</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
</script>
<style>
table,th,td{
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
</style>
<script>
var app=angular.module("myapp",[]);
app.controller("ctrl", function($scope,$http){
$http.get('api/student.json')
.then(function(response){
$scope.student=response.data;
});
});
</script>
</head>
<body ng-app="myapp" ng-controller="ctrl">
<table>
<tr>
<td>Student ID</td>
<td>Student Name</td>
</tr>
<tr ng-repeat="students in student">
<td>{{students.StudentID}}</td>
<td>{{students.StudentName}}</td>
</tr>
</table>
</body>
</html>
Api/student.json
[
{
"StudentID":1,
"StudentName":"prawin"
},
{
"StudentID":2,
"StudentName":"prawindharani"
},
{
"StudentID":3,
"StudentName":"dharaniprawin"
}
]
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and must added to webpage by using <script> tag.
- In controller we created ‘app’ variable used to store our application ‘myapp’ and in application we need to append controller ‘ctrl’ to the application ‘app’ variable for access all elements values.
- We defined our function with parameters of $scope,$http objects, here using $http object we getting our json file ‘student.json’ path and data from server. Api is folder name of json file location.
- Using then method we passing data response to function then using $scope object we storing response data to array variable ‘student’ in html.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here. In body we defined application and controller ‘myapp,ctrl’ using directives of ‘ng-app,ng-controller’.
- Within body we created table with two columns ‘Student ID, Student Name’. Using ‘ng-repeat’ directive we can collects all data from json file once then printed on respective table columns and row will added by json data length.
- Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to retrieve json data using angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
In our program when user executing on browser it will display table with information of student json array data.
We can create our own json file with different information also like employee detail, author details or company details,..etc.
I hope this tutorial on how to retrieve json data in angularjs helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
