Reputation: 147

how to get an array value into controller as i am getting undefined in angularjs

I am working on angularjs routing where i have an array of employees in factory and the homecontroller displays those arrays in the view and view to html page (please correct me if my sequence or construction is wrong). I do edit and add employee operation on them . While doing edit operation , as soon as i click on the edit link, it routes to edit.html page and the view is controlled by EditController. However, i want the text boxes to contain and retain there original values, like empId:1, empName:John, empLocation:Mumbai when in edit.html page, but all the values doesn't come . Please help.

app.js

  angular.module("Swabhav.Employee",['ngRoute'])
    .config(['$routeProvider',function($routeProvider){

     $routeProvider
     .when('/',{
         controller:"HomeController",
         templateUrl:"home.html"

     })
    .when('/add',{
        controller:"AddController",
        templateUrl:"add.html"
    })

    .when('/home',{
        controller:"HomeController",
        templateUrl:"home.html"
    })

    .when('/edit/:empId',{
        controller:"EditController",
        templateUrl:"edit.html"
    })


   }])

EmployeeService Factory

  angular.module("Swabhav.Employee")

  .factory("EmployeeService",["$log",function($log){

    var employees=[{"empId":1,"name":"John","location":"Mumbai"},
                   {"empId":2,"name":"Nikita","location":"Mumbai"},
                   {"empId":3,"name":"Saurab","location":"Pune"},
                    {"empId":4,"name":"Ankita","location":"Bangalore"},
                    {"empId":5,"name":"Harsh","location":"Chennai"},
                    {"empId":6, "name":"Geeta","location":"Vellore"}];

    var obj={};

    obj.displayAll=function(){
            return employees;
       }

     obj.getById = function(Id){
        var employee=[];
         $log.log("emp id = "+ Id)
        angular.forEach(employees,function(value,key){
            if(value.empId==Id){
                $log.log("inside");
                $log.log(employees);
                $log.log(value.location)

 employee.push({empId:value.empId,name:value.name,location:value.location});
            $log.log(employee)

            }
            return (employee);
        })

       }

     obj.addEmployee=function(Id,Name,Location){

         $log.log(employees)
         employees.push({empId:Id,name:Name,location:Location})
         return employees;
     }

     obj.editEmployee=function(employeeId,employeeName,employeeLocation){
       var index;
        for(index=0;index<employees.length;index++){
            if(employees.indexOf(employeeId) != -1){

                $log.log("edit employee = "+ employees[index])

                employees.empId=employeeId;
                employees.name=employeeName;
                employees.location=employeeLocation;

            }

        }
        return employees;
     }
    return obj;

  }])

HomeController

   angular.module("Swabhav.Employee")
       .controller("HomeController",
  ["$scope","EmployeeService","$log","$window",function($scope,
        EmployeeService,$log,$window){

   $log.log (EmployeeService.displayAll());   

   $scope.data=EmployeeService.displayAll();


   }])

AddController

   angular.module("Swabhav.Employee")
    .controller("AddController",
    ["$scope","EmployeeService","$log","$window",function($scope,
        EmployeeService,$log,$window){

        $scope.add=function(empId,name,location){
            $scope.Id=empId;
            $scope.Name=name;
            $scope.Location=location

     EmployeeService.addEmployee($scope.Id,$scope.Name,$scope.Location);
            $window.location.href = "#/home";
        }
    }])

EditController

     angular.module("Swabhav.Employee")
           .controller("EditController",
    ["$scope","EmployeeService","$log","$window","$routeParams",
           function($scope,EmployeeService,$log,$window,$routeParams){

            $scope.employeeData=EmployeeService.displayAll();

            $log.log("$scope.employeeData = "+ $routeParams.empId )
            $scope.empIdvalue = $routeParams.empId;

             $scope.editDisplay=
                 EmployeeService.getById($scope.empIdvalue);


      $log.log("EmployeeService.getById(3)"+EmployeeService.getById(3));

                $scope.edit= function(empId,name,location){
                    $scope.Id=empId;
                    $scope.Name=name;
                    $scope.Location=location

     EmployeeService.editEmployee($scope.Id,$scope.Name,$scope.Location);
                    $window.location.href = "#/home";
                }

            }])

home.html

   <article>
    <table class="table table-bordered">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Location</th>
            <th> Edit </th>

        </tr>
    </thead>
    <tbody>
            <tr ng-repeat="employee in data" >

                    <td>{{employee.empId}} </td>
                    <td>{{employee.name}} </td>
                    <td>{{employee.location}}</td>
                    <td><a href="#/edit/{{employee.empId}}">Edit</a>

                 </td>

        </tr>

    </tbody>
    <br>
    <a href="#add">Add Employee</a>
    </table>

  </article>

edit.html

 <article>
  <h3>Edit Page</h3>
  <br><br>
   empId:<input type="text" ng-value=empIdvalue ng-model="employeeId">
   empName:<input type="text" ng-value=empNamevalue ng-model="employeeName">
  empLocation:<input type="text" ng-value=empLocationvalue ng-
 model="employeeLocation">
  <button type="button"  ng-
  click="edit(employeeId,employeeName,employeeLocation)">Edit</button>
  </article>

index.html

  <html ng-app="Swabhav.Employee">
  <head>
    <title>Employee</title>
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
 </script>
    <script 
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
 </script>
</head>
 <body>

     <script src="app.js"></script>
     <section ng-view></section>
  </body>
</html>

Upvotes: 0

Answers (2)

Abr001am

Reputation: 591

You need to change you editcontroller like this:

angular.module("Swabhav.Employee")
           .controller("EditController",
    ["$scope","EmployeeService","$log","$window","$routeParams",
           function($scope,EmployeeService,$log,$window,$routeParams){
            $scope.param1 = $routeParams.empId;
            $scope.employeeData=EmployeeService.displayAll();
            $scope.empIdvalue = $routeParams.empId;
            $scope.editDisplay=
                 EmployeeService.getById($scope.empIdvalue);
            $scope.param2 = $scope.editDisplay[0]["location"];
            $scope.param3 = $scope.editDisplay[0]["name"];


            $scope.edit= function(empId,name,location){
                    $scope.Id=empId;
                    $scope.Name=name;
                    $scope.Location=location;

                    EmployeeService.editEmployee($scope.Id,$scope.Name,$scope.Location);
                    $window.location.href = "#/home";
                }

            }])

param1 param2 and param3, will be used in your ng-model in edit.html.

<article>
  <h3>Edit Page</h3>
  <br><br>
   empId:<input type="text" disabled="disabled" ng-model="param1">
   empName:<input type="text" ng-value="editDisplay[0]['name']" ng-model="param2">
  empLocation:<input type="text"  ng-value="editDisplay[0]['location']" ng-model="param3">
  <button type="button"  ng-click="edit(editDisplay[0]['empId'],param2,param3)">Edit</button>

  </article>
  <a href=".">return</a>

Another error you have comitted in getById function, thinking that foreach promises return a value to the container parent function, no it just throws back to the nearer promise, it is rather adviced to use a filter selector like this:

obj.getById = function(Id){
        return employees.filter(function(value,key){
            if(value.empId==Id)
                 return 1;
            else
                 return 0;
        })

       }

Finally there is another substiantial change in editEmployee function, you seem to jumble it a whole.

obj.editEmployee=function(employeeId,employeeName,employeeLocation){
       var index=employees.map((id)=>id.empId).indexOf(employeeId);
        if(index != -1){

                $log.log("edit employee = "+ employees.map((id)=>id.name)[index])

                employees[index].empId=employeeId;
                employees[index].name=employeeName;
                employees[index].location=employeeLocation;

            }

        return employees;
     }

forked here

Upvotes: 1

Akshaya Jeevan

Reputation: 634

You should not use ng-value. You can use the $scope.editDisplay variable as model. You can change your code like this.