Angularjs displaying ajax response

Question

Basically my angular code looks like this

    var myapp = angular.module("Demo",["ngRoute"])
            .config(function($routeProvider){
                $routeProvider                                                      
                    .when("/students",{
                        templateUrl : "templates/students.html",
                        controller : "grouplistcontroller"
                    })
            })              
            .controller("grouplistcontroller", function($scope,$http){                      
                $http.get("ajaxfunction.php?action=getlist")
                    .then(function(res) {   
                        var obj = JSON.stringify(res);
                        console.log(obj);
                        $scope.students = obj.data;
                    });                     
            });

The json data from server looks like this

"data":[
{
"sub_id":"1199",
"sub_group":"GT"
},
{
"sub_id":"727",
"sub_group":"GT"
},
{
"sub_id":"660",
"sub_group":"GT"
},
{
"sub_id":"614",
"sub_group":"GT"
}
],
"status":200,
"config":{
"method":"GET",
"transformRequest":[
null
],
"transformResponse":[
null
],
"url":"ajaxfunction.php?action=getlist",
"headers":{
"Accept":"application/json, text/plain, */*"
}
},
"statusText":"OK"

I am trying to display the loop from the result in my front end, which isnt working

<ul>
   <li ng-repeat="student in students">
        {{ student.sub_id }}
   </li>
</ul>

The isn't working would be redirecting to the ng-repeat or to the json data, trying to figure out where it is — Arun
– Arun, Commented Aug 31, 2016 at 5:34
Oh, you have a typo. It should be $scope.students = res.data, not obj.data. obj is your JSON string and it has no data property. See plnkr.co/edit/8KMvL0CX6Bry3oBNdHct?p=preview — Phil
– Phil, Commented Aug 31, 2016 at 5:35
why are you converting it to a string? in that form you can't access to the properties of the object. — Paulo Galdo Sandoval
– Paulo Galdo Sandoval, Commented Aug 31, 2016 at 5:38

Gopinath Kaliappan · Accepted Answer · 2016-08-31 05:41:28Z

4

Hi You Don't have to convert JSON.stringify(obj), Simply Use as Object ... Use the Below Controller

.controller("grouplistcontroller", function($scope,$http){                      
                $http.get("ajaxfunction.php?action=getlist")
                    .then(function(res) {   


                        $scope.students = res.data;
                    });                     
            });

answered Aug 31, 2016 at 5:41

Gopinath Kaliappan

7,4298 gold badges42 silver badges62 bronze badges

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

Comments

kernal_lora · Accepted Answer · 2016-08-31 06:10:45Z

-2

I think controller for not getting the data from server. COntroller not intended for that. you should use services for that see this code. I hope this might works for you.

<body ng-app="Demo">
  <div ng-controller="grouplistcontroller">
    <ul>
      <li ng-repeat="student in students">
        {{ student.sub_id }}
      </li>
    </ul>
  </div>
</body>

JS:

Module:

   var myapp = angular.module("Demo", ["ngRoute"])
     .config(function($routeProvider) {
       $routeProvider
         .when("/students", {
           templateUrl: "templates/students.html",
           controller: "grouplistcontroller"
         })
     });

Controller:

myapp.controller("grouplistcontroller", ['$scope', 'SampleService', function($scope, SampleService) {
   function suuccessMethod(res) {

     $scope.students = res.data;
   }

   function errorMethod(err) {

   }


   SampleService.get().then(suuccessMethod, errorMethod);
 }]);

Services:

   myapp.factory('SampleService', function($http) {
     return {

       get: function() {
         return $http.get("ajaxfunction.php?action=getlist");
       }

     }

   });

Coming your issues: issue at this function:

function suuccessMethod(res) {

     $scope.students = res.data;
   }

Place this as above i hope it will works

edited Aug 31, 2016 at 6:10

answered Aug 31, 2016 at 5:41

kernal_lora

1,1553 gold badges13 silver badges26 bronze badges

5 Comments

Phil Over a year ago

"you should use services for that" <- $http is a service

kernal_lora Over a year ago

Yes it is service sorry I didn't get your question?

Phil Over a year ago

Why create a service (SampleService) to just wrap another service ($http) without adding anything to it?

kernal_lora Over a year ago

I don't have big reason for that but I think in our application can readable by doing this. All server commuication call can be wrapped in the single service so that it readable for us

kernal_lora Over a year ago

Debugging also easy I think. can't be?? If am wrong please correct me

Collectives™ on Stack Overflow

Angularjs displaying ajax response

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related