Looping json data using AngularJS in Asp.net MVC

Question

I am trying to fetch records via ajax and displaying using AngularJS. But my code even not invoking controller action.

I am trying this code..

<div ng-controller="MyCtrl">
<div ng-repeat="result in products">
    {{result.ProductName}}
</div>
</div>

Ajax :

function MyCtrl($scope) {
  $.ajax({
    url: "/Products/Get/",
    type: "POST",
    success: function (data) {
      // Success message
      var myApp = angular.module('myApp', []);
      $scope.products = data;
    },
    error: function () {
      // Fail message
    },
  });
}

I am using this post to make it work.

You don't have controller MyCtrl

Tân
– Tân

2016-07-24 11:01:52 +00:00
Commented Jul 24, 2016 at 11:01 — Tân
– Tân, Commented Jul 24, 2016 at 11:01

Ashwini Verma · Accepted Answer · 2016-07-24 11:11:54Z

2

Your approach is wrong. You should use angularJS's controller directive to invoke services to consume json data.

<script type="text/javascript">
    var app = angular.module('myApp', []); 
    app.controller('MyCtrl', function ($scope, $http) {  
        $http.get('/Products/Get/').success(function (data) {  
            $scope.products = data;
        });
    });
</script>

I had written an article few days ago on the same. You can go through here. This might be helpful.

edited Jul 24, 2016 at 11:11

answered Jul 24, 2016 at 11:06

Ashwini Verma

7,5257 gold badges38 silver badges56 bronze badges

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

1 Comment

developer033 Over a year ago

Since success is deprecated you should use then instead of success.

Bintang Chester · Accepted Answer · 2016-10-21 09:02:45Z

you need declare module name in angularjs , and dont forget to add module name in you body or html tag..like this <body data-ng-app="app"> and then Try like this :

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

app.controller('MyCtrl',function($scope,$http){

bindData();
function bindData(
    // it will be nice, if this code your separate to file service...    
    $http.get('/Products/Get').success(function (callBack) {  
            $scope.products = callBack.data;
    });
);
});

</script>

and Best Implementation like This :

// in controller, injected you service name like this..
app.controller('MyCtrl',function($scope,$http ,myServices){

bindData();
function bindData(
  var promiseGet = myServices.GetAll();
  promiseGet.then(function(callBack){ // success
    $scope.products = callBack.data;

   }     
 ,function(error){ // error
     console.log(error);
   });
 );

});

app.service('myServices',function($http){
var vm = this;
vm.GetAll = function(){
         return $http.get('/Products/Get');
     }
});

and type not POST, if you want to Get data in ajax function..

Collectives™ on Stack Overflow

Looping json data using AngularJS in Asp.net MVC

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related