Post
Ask Question

Make AJAX Call and Return JSON Using AngularJS

Introduction

This article explains How to get data in JSON format using AngularJS.

Actually I was trying to make an AJAX call to a WebService using AngularJS. For that I tried this code:

  1. <script>  
  2.         var myapp = angular.module('myApp', []);  
  3.         myapp.controller('control', function ($scope, $http) {  
  4.             var call = "WebService1.asmx/HelloWorld";  
  5.             $http.post(call).success(function (response) {  
  6.                 $scope.value = response;  
  7.             })  
  8.             .error(function (error) {  
  9.                 alert(error);  
  10.             });  
  11.         });  
  12. </script>  

At the WebService I created a method that was returning a string, here I am just using Hello World that is provided in each WebService by default.

  1. [System.Web.Script.Services.ScriptService]  
  2. public class WebService1: System.Web.Services.WebService  
  3. {  
  4.     [WebMethod]  
  5.     public string HelloWorld()   
  6.     {  
  7.         return "Hello World";  
  8.     }  
  9. }  

After making the call I bound the value into a span using ng-bind.

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div ng-app="myApp" ng-controller="control">  
  4.             <span ng-bind="value"></span>  
  5.         </div>  
  6.     </form>  
  7. </body>

On running the code I got output like this.

This was not the output I was expecting, I realized that the data is not coming in JSON format, so I had two possible solutions, either return the data from the WebService after converting it to JSON or make every incoming data JSON using AngularJS, I chose the second and changed the code to be as in the following:

  1. <script>  
  2.     var myapp = angular.module('myApp', []);  
  3.     myapp.controller('control', function ($scope, $http) {  
  4.         $http({  
  5.             url: "WebService1.asmx/HelloWorld",  
  6.             dataType: 'json',  
  7.             method: 'POST',  
  8.             data: '',  
  9.             headers: {  
  10.                 "Content-Type": "application/json"  
  11.             }  
  12.         }).success(function (response) {  
  13.             $scope.value = response.d;  
  14.         })  
  15.         .error(function (error) {  
  16.             alert(error);  
  17.         });  
  18.     });  
  19. </script> 

Now, you can see that the call is looking something like an AJAX call made using jQuery but it's from AngularJS, so some of you might feel that this way of calling is easier than the previous one but It's just the extended version of the previous call.

Here I have added the success and error functions so that I could determine what type of error I am getting if the code is not working.

Now, we can run the code and see the output.


Now, we are getting the expected result.

The source code is available at the top of article.


Similar Articles