showing json data with angularjs

Question

Hi I'm showing some sample data which I get from server using angularjs.

Here I've called GetNames() function in ng-init. Is it ok to call that function in ng-init. Because I need to show data when page loads.

Here is my code.

<div ng-app="myApp" ng-controller="personController"  >

    <ul>
  <li ng-repeat="x in names">
    {{ x}}
  </li>
</ul>
</div>


<script>
var app = angular.module("myApp", []);

app.controller('personController', function($scope,$http) {
    $scope.GetNames = function () {
      var httpResponse = $http({
            method: 'POST',
           async: true,
           cache: false,
            url: "http://localhost:55513/Home/GetNames",
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });
      httpResponse.success(function (data) {
            $scope.names = data;       
       } ); 
    };
    $scope.GetNames();
});
</script>

And it works for me.

And also if I use jquery/Ajax for fetching data, even I get the response with data. That data is not loading in the screen. (If I do a postback with a button it loads) What is the reason for this..

here is my GetNames() function with the jquery/Ajax code..

$scope.GetNames = function () {

         $.ajax({
                url: "@Url.Action("GetNames", "Home")",

                dataType: 'json',
                type: 'POST',
                success: function (response) {
                    $scope.names = response;

                },
                error: function () {
                    console.log("error");
                }
            });
}

There are $http service for http requests, BTW. docs.angularjs.org/api/ng/service/$http — baldrs
– baldrs, Commented Oct 30, 2014 at 11:00

Arun P Johny · Accepted Answer · 2014-10-30 11:00:09Z

2

It is because you are using a jquery ajax to update the scope variable, which does not trigger the digest cycle which is responsible to update the UI.

The correct solution to this problem is to use $http service for ajax requests...

Another solution (If you want to know how to make the jquery ajax work) is to use $scope.$apply()

success: function (response) {
    $scope.$apply(function () {
        $scope.names = response;
    });
}

When to use $scope.$apply()

answered Oct 30, 2014 at 11:00

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tarzanbappa Over a year ago

thanks it works. How about the first question I've asked about the place calling GetNames() function since I have to load data when page loading?

Arun P Johny Over a year ago

@tarzanbappa since you have a controller why don't you just call GetNames after $scope.GetNames=function(){} so there won't be any need to have ng-init

Arun P Johny Over a year ago

@tarzanbappa can you share the complete controller code

Arun P Johny Over a year ago

@tarzanbappa but where is the GetNames defined... is it in a different controlelr

tarzanbappa Over a year ago

Sry for that.Now you can see the complete controller. Previously I called GetNames() instead of $scope.GetNames(). Now its working. could you plz check whether are there any improvements needed?

Kalhan · Accepted Answer · 2014-10-30 11:01:51Z

1

jQuery ajax is out of capability of angular, you need to wrap like below, it will tell the $scope.user is going to update and update the view also

 success: function (response) {
    $scope.$apply(function(){
        $scope.user = data;
    });
 },

Angular ajax comes with the digest cycle triggering mechanism. then it will automatically change the view also, but jquery is not capable of it.

answered Oct 30, 2014 at 11:01

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Collectives™ on Stack Overflow

showing json data with angularjs

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related