angularjs ajax call – angularjs ajax call with example of json

angularjs ajax call – angularjs ajax call with example of json

angularjs ajax call :: AngularJS provides $https: control which works as a service to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format.

Once the data is ready, $https: can be used to get the data from server in the following manner −

function userController($scope,$https:) {
	var ajax_data_txt = "user_data.txt";
    $https:.get(ajax_data_txt).success( function(response) 
    {
      $scope.user = response; 
    });
}

Here, the file user_data.txt contains users records. $https: :: service makes an ajax call and sets response to it’s property users. users model can be used to draw tables in HTML.

Examples

user_data.txt

[
{
"Username" : "Mahesh Kad",
"Erno" : 452,
"Percentage" : "22%"
},

{
"Username" : "Dinkar Parashar",
"Erno" : 952,
"Percentage" : "55%"
},

{
"Username" : "Robert Do",
"Erno" : 158,
"Percentage" : "95%"
},

{
"Username" : "Julian Roy",
"Erno" : 125,
"Percentage" : "74%"
}
]

ajax-AngularJS.html File


   
        angularjs ajax call - onlinecode  

angularjs ajax call - onlinecode

User Name Er No Percentage
{{ users.Username }} {{ users.Erno }} {{ users.Percentage }}

OUTPUT ::

To execute this example of call of angularjs ajax , we need to deploy ajax-AngularJS.html and user_data.txt file to a web server. Open the file ajax-AngularJS.html using the URL of your server in a web-browser and see like following the result.

angularjs ajax call – onlinecode

NameRoll NoPercentage
Mahesh Kad95222%
Dinkar Parashar20155%
Robert Do15895%
Julian Roy12574%

Service HTTP Methods

There are many several shortcut methods of calling the $http service. In the above example,we use .get method of the $http service is used.

Following are several other shortcut methods for $http ::

  • .post()
  • .put()
  • .delete()
  • .jsonp()
  • .head()
  • .get()
  • .patch()

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  3  =  12

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US