How do I pass array information using a factory in Javascript?

Question

Using a factory, I want to get information from one page (text fields and a submit button), put it in an array, and read from that array to post it into a different page. Here is a snippet of my code.

app.factory("service", function(){
    var serv = {};
    serv.arr = [];
    serv.add = (title, name, post, tag) => serv.arr.push({
        "title" : title, "name" : name, "post" : post, "tag" : tag
    });
    return serv;
});

app.controller("createCtrl", ["$scope", "service", function($scope, service) 
{
    display = () => service.add($scope.title, $scope.name, $scope.post, 
    $scope.tag);
        console.log(service.arr);
}]);

app.controller("newsCtrl", ["$scope", "service", function($scope, service){
    $scope.newsPage = "News";
    $scope.array = service.arr;
}]);

I know I'm probably way off but at this stage I can't even tell if any information is being added to the array.

I can try. I have a page that works with a few URL's. Two of those URL's take me to a page called "create" and another called "news". On the "create" page I have a few text input fields in a form, what I want to do is take information typed and submitted in this form, capture it in an array and display the input on the "news" page. — Beer_Daiquiri
– Beer_Daiquiri, Commented Oct 30, 2018 at 6:33
you can communicate between controllers via $emit event emitting. — Nattamai Jawaharlal Manikandan
– Nattamai Jawaharlal Manikandan, Commented Oct 30, 2018 at 6:38

Shiv Kumar Baghel · Accepted Answer · 2018-10-30 06:44:37Z

2

Try below code for set & get data from factory. Click on SAVE DATA & then GET DATA buttons to see the actions

(function(ng, app){
    app = angular.module('app', [])
    


app.factory("service", function(){  
    
var serv = {};
var arr = [];
    return {
  
      add : function (title, name, post, tag) {
        arr.push({
            "title" : title, "name" : name, "post" : post, "tag" : tag
           });
      },
    
      get : function (firstname) {
        return arr[0];
      }
    
    }
});

    
app.controller("createCtrl", ["$scope", "service", function($scope, service) 
{
    $scope.display = function(){
       service.add($scope.title, $scope.name, $scope.post, $scope.tag); 
    };
}]);

app.controller("newsCtrl", ["$scope", "service", function($scope, service){
    $scope.newsPage = "News";
   
    $scope.getData = function(){
       $scope.array = service.get();
    };        
}]);


}(angular));

input {
 margin: 5px;
}

<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
  <body>
    
    <div ng-controller="createCtrl as main">
      <h1>create Ctrl</h1>
    <input ng-model="title" placeholder="title" /><br/>

      <input ng-model="name" placeholder="name" /><br/>

      <input ng-model="post" placeholder="post" /><br/>

      <input ng-model="tag" placeholder="tag" /><br/>
      <button ng-click="display()">  SAVE DATA </button>     
    </div>

<br/> <hr/>

    <div ng-controller="newsCtrl">
      <h2>news Ctrl </h2>
      <button ng-click="getData()">  GET DATA </button>

      <p> title : {{array.title}} </p>
      <p> name : {{array.name}} </p>
      <p> post : {{array.post}} </p>
      <p> tag : {{array.tag}} </p>
      
    </div>
    
  </body>
</html>

answered Oct 30, 2018 at 6:44

Shiv Kumar Baghel

2,4906 gold badges20 silver badges36 bronze badges

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

2 Comments

Beer_Daiquiri Over a year ago

Ah this is just what I needed! Thank you!

Shiv Kumar Baghel Over a year ago

welcome :) :) .. you can accept as answer if it solves your problem.

Collectives™ on Stack Overflow

How do I pass array information using a factory in Javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related