CODEWITHSUNDEEP
javascriptangularjsarraysangularjs-directiveangular-services
jsPlayer
jsPlayer

Reputation: 1245

Angular ,display array using service

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>

Upvotes: 0

Views: 120

Answers (3)

jettpleyn
jettpleyn

Reputation: 130

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>

Upvotes: 1

LoganRx
LoganRx

Reputation: 382

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

Upvotes: 1

Sujithrao
Sujithrao

Reputation: 785

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

Upvotes: 0

Related Questions