Angular service to display an array of data

Question

Angular service to display an array of data

I have been experimenting with Angular, working on small exercises to improve my skills. I have managed to display objects in the controller but am struggling to use service and factory to display an array called "names" on a table. Can someone please review my code and point out what I am doing wrong? Additionally, how can I use a factory to achieve the same result? Here is the code:

After receiving some answers, I realized that the factory is not displaying the ethnicity information as expected.

javascript angularjs arrays angularjs-directive angular-services

Answer 1

Answer №1

To remedy your current implementation, you simply need to make two adjustments. First, update the servicee.names in your controller to servicee.names(). Then, in your template, modify s.names to just s.

If you were to achieve the same functionality using a factory, it would look like this:

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 distinction between a factory and a service lies in the fact that a factory is essentially a function that returns an object with desired values or functions, while a service is instantiated using the new operator, enabling us to expose anything by attaching it to this.

Answer 2

To remedy your current implementation, you simply need to make two adjustments. First, update the servicee.names in your controller to servicee.names(). Then, in your template, modify s.names to just s.

If you were to achieve the same functionality using a factory, it would look like this:

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 distinction between a factory and a service lies in the fact that a factory is essentially a function that returns an object with desired values or functions, while a service is instantiated using the new operator, enabling us to expose anything by attaching it to this.

Answer 3

Answer №2

In order to access the functionality of the servicee, you need to call the function within your controller.

$scope.callnames = servicee.names();

Next, in your HTML code:

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

UPDATE: If you prefer using a factory instead of a service:

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

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

    return this;

});

Then, in your controller, keep it consistent:

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 UPDATE: There is an issue with duplicate 'Asian-Indian' values in your array, to resolve this, include track by $index in your HTML.

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

Answer 4

In order to access the functionality of the servicee, you need to call the function within your controller.

$scope.callnames = servicee.names();

Next, in your HTML code:

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

UPDATE: If you prefer using a factory instead of a service:

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

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

    return this;

});

Then, in your controller, keep it consistent:

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 UPDATE: There is an issue with duplicate 'Asian-Indian' values in your array, to resolve this, include track by $index in your HTML.

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

Answer 5

Answer №3

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

Answer 6

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

Angular service to display an array of data

Answer №1

Answer №2

Answer №3

Similar questions

Exploring the Art of Navigation with Ionic and Angular

Bot is being inundated with messages containing no content

Modify the internal value of a nested array

Transform Gulp task into webpack configuration

Exploring an Array in SwiftUI's Data Model

Display/Modify HTML form

Is it possible to securely embed videos on external websites while also utilizing tokens to safeguard the content?

Sequelize: When attempting to use .get({plain: true})) method, an error is returned indicating that .get is

Utilizing Javascript's Mapping Functionality on Arrays

typescript handling a supposedly optional property that is not truly optional

What is the process for inserting a document into an array that is nested within another array?

Concerns regarding the efficiency of JavaScript (Odin Project, Etch-a-Sketch) are arising

Is it true that using filter(x => !!x) yields the same result as filter(x => !!x && x)?

Can you explain the contrast between aws-amplify-react and @aws-amplify/ui-react?

manipulating elements of an array within a .map method

JavaScript for URL encoding

Issues with Materializecss sidenav functionality

``What are the steps to identify and retrieve variables from an Angular HTML template by utilizing Abstract Syntax Trees

I am facing a problem with Python selenium where I am unable to manually click on a div, but

Creating a header for an HTML table with merged columns in jQuery DataTables