current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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>

share|improve this question
    
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 22 hours ago
    
will do , thanks:) – Anu Rajan 22 hours ago
up vote 1 down vote

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

share|improve this answer
    
thank you. it worked. would you be kind enough to show how would i implement this in myApp.factory instead of myApp.service – Anu Rajan 22 hours ago
    
@AnuRajan I have updated my answer with a factory implementation as well – LoganRx 13 hours 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 – Anu Rajan 12 hours ago
    
I dont see any updates/edits to your original answer – LoganRx 10 hours 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 – LoganRx 10 hours ago
up vote 1 down vote

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>
share|improve this answer
    
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 – Anu Rajan 5 hours ago
    
check my another edit. – jettpleyn 25 mins ago
up vote 0 down vote 

// 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>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.