Angular ,display array using service

Question

i am learning angular by doing small exercises. i have successfully displayed objects in controller and trying to learn to use service and factory. i am unsuccessful in displaying array "names" on a table using service. please look at my code to see what i am doing wrong and also how would use factory to display the same array. here is my code

edited question after receiving partial answer:

factory is not not displaying the information ethnicity .

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

myApp.filter("agefilter", function(){

var x= function(age){
    if(age==23||age==22){

        return "Young";
    }

    if(age==25){

        return "Mature";
    }
    if(age==26){

        return "Oldest";
    }
}
return x;
});





myApp.controller("ctrl", function($scope,factoryy){

    $scope.person=[

       {name:"jay",age:25,salary:85000},
        {name:"anu",age:23,salary:65000},
         {name:"jose",age:26,salary:75000},
          {name:"sharon",age:22,salary:70000}


    ];
    
//   $scope.callnames = servicee.names(); 
  $scope.calleth   = factoryy.geteth();


});



myApp.factory("factoryy",function(){

     var ethnicity = ["Asian-Indian","Asian-Indian","Chinese","Latino","American"];

     return{

      geteth: function(){

         return ethnicity;
         }
     }

});


// myApp.service("servicee",function(){

//       var names= ["jay","anu","sharon","jose","mary"];
// this.names = function(){
//       return names;
// }


// });

 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
 	<title></title>
 </head>
 <body ng-app="app" ng-controller="ctrl" >
 

 <table border="1">
     <tr>
         <th>Name</th>
         <th>Age</th>
         <th>Salary</th>


     </tr>
 	
     <tr ng-repeat="i in person">
         <td>{{i.name |uppercase }}</td>
         <td>{{i.age|agefilter}}</td>
         <td>{{i.salary|currency}}</td>
        

     </tr>



 </table><br><br><br>


  <!--<table border="1">
     <tr><th>Name</th></tr>
 	
     <tr ng-repeat="s in callnames">

         <td>{{s}}</td>
    </tr>
    
 </table>-->



  <table border="1">
     <tr>

         <th>Ethnicity</th>
         
     </tr>
 	
     <tr ng-repeat="e in calleth">

         <td>{{e}}</td>
    </tr>
    
 </table>



 <script src="../js/angu.js"></script>
 </body>
 </html>

Just a recommendation, but you might find your code easier to debug if you were a little more consistent with indentations and kept your spacing a bit tighter. Keeps things easier to keep track of mentally :) — 1252748
– 1252748, Commented Nov 23, 2016 at 4:58

LoganRx · Accepted Answer · 2016-11-23 14:35:36Z

1

So in order to fix you current implementation you would just need to do 2 things, first update the servicee.names in your controller to servicee.names() and then in your template update your s.names to just s

In order to do the same functionality with a factory you would do it this way:

myApp.factory("nameFactory",function(){
  var names= ["jay","anu","sharon","jose","mary"];

  return {
      getNames: function(){
        return names;
      }
  }
});
myApp.controller("ctrl", function($scope,nameFactory){
  $scope.person=[
     {name:"jay",age:25,salary:85000},
     {name:"anu",age:23,salary:65000},
     {name:"jose",age:26,salary:75000},
  ];

  $scope.callnames = nameFactory.getNames(); 
});

The difference between a factory and a service is that a factory is just a function that is returned so we can return an object that exposes whatever values or functions that we want, while a service is initialized with the new operator which allows us to simply expose anything by attaching it to this

edited Nov 23, 2016 at 14:35

answered Nov 23, 2016 at 3:13

LoganRx

3822 silver badges13 bronze badges

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

7 Comments

jsPlayer Over a year ago

thank you. it worked. would you be kind enough to show how would i implement this in myApp.factory instead of myApp.service

LoganRx Over a year ago

@AnuRajan I have updated my answer with a factory implementation as well

jsPlayer Over a year ago

can you check what i am doing doing wrong? i think i followed everything you suggested. i edited the code you did to mine

LoganRx Over a year ago

I dont see any updates/edits to your original answer

LoganRx Over a year ago

From the edit you suggested I cannot see anything in the actual controller and factory logic that would be causing an issue, you may need to make sure that you have updated your template

|

jettpleyn · Accepted Answer · 2016-11-24 03:24:57Z

1

You must invoke the function of the servicee in your controller

$scope.callnames = servicee.names();

Then in your html,

<tr ng-repeat="s in callnames">
     <td>{{s}}</td>
 </tr>

EDIT: If you want to use factory instead of service

myApp.factory("myFactory",function(){

    var names= ["jay","anu","sharon","jose","mary"];
    this.names = function(){
          return names;
    }

    return this;

});

Then in your controller, still the same.

myApp.controller("ctrl", function($scope,myFactory){

    $scope.person=[

        {name:"jay",age:25,salary:85000},
        {name:"anu",age:23,salary:65000},
        {name:"jose",age:26,salary:75000},


    ];

  $scope.callnames = myFactory.names(); 


});

ANOTHER EDIT: The problem with your array that it has the 2 'Asian-Indian', to fix this you must add track by $index in your html.

<tr ng-repeat="e in calleth track by $index">
     <td>{{e}}</td>
</tr>

edited Nov 24, 2016 at 3:24

answered Nov 23, 2016 at 4:53

jettpleyn

1304 bronze badges

1 Comment

jsPlayer Over a year ago

service work with your structure but factory is not. i have edited the original question . can you check for the error. its not displaying ethnicity table using factory

Sujithrao · Accepted Answer · 2016-11-23 05:07:16Z

// var myApp =angular.module("app",[]);

// myApp.controller("ctrl",function($scope){

// 	$scope.person =
// 	[

//        {name:"john",age:30},
//        {name:"sam",age:20},
//        {name:"jay",age:25}

//     ];
    
//     $scope.title = "Learning Angular"
// })
// _____________________________________________________________________________________
// _____________________________________________________________________________________
// _____________________________________________________________________________________

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

myApp.filter("agefilter", function(){

var x= function(age){
    if(age==23){

        return "Young";
    }

    if(age==25){

        return "Mature";
    }
    if(age==26){

        return "Oldest";
    }
}
return x;
});

myApp.controller("ctrl", function($scope,servicee){

    $scope.person=[

       {name:"jay",age:25,salary:85000},
        {name:"anu",age:23,salary:65000},
         {name:"jose",age:26,salary:75000},


    ];
    
  $scope.callnames = servicee.names(); 


});
myApp.service("servicee",function(){

      var names= ["jay","anu","sharon","jose","mary"];
this.names = function(){
      return names;
}


});

 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
 	<title></title>
 </head>
 <body ng-app="app" ng-controller="ctrl" >
 

 <table border="1">
     <tr>
         <th>Name</th>
         <th>Age</th>
         <th>Salary</th>


     </tr>
 	
     <tr ng-repeat="i in person">
         <td>{{i.name |uppercase }}</td>
         <td>{{i.age|agefilter}}</td>
         <td>{{i.salary|currency}}</td>
        

     </tr>



 </table> <br><br><br>


  <table border="1">
     <tr>
         <th>Name</th>
         


     </tr>
 	
     <tr ng-repeat="s in callnames">
         <td>{{s}}</td>
         
        

     </tr>



 </table>


 <script src="../js/angu.js"></script>
 </body>
 </html>

Collectives™ on Stack Overflow

Angular ,display array using service

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related