angualr.forEach to add one dummy element while iterating

Question

I am working on angularjs application. I am getting dynamic values from the backend as a list($scope.list) and while iterating the list using forEach , i want to add one dummy element.

I have created a demo plunker with similar scenario : https://plnkr.co/edit/XFFYAKEd6gPuL2JAWCbD?p=preview

In the above demo plunker i have created a $scope.list and while iterating the list i want to add one more element({id:'1900',firstname: 'dummyElement', lastname: 'D'}).Any inputs?

Try using `push()` method to add a new element to the array. — Hassan Imam, Feb 06 '18 at 05:25
Possible duplicate of [Add new object to array](https://stackoverflow.com/questions/9543805/add-new-object-to-array) — Hassan Imam, Feb 06 '18 at 05:25
I have tried as shown https://stackoverflow.com/questions/20111281/angularjs-foreach-push-new-item-into-object . In my loop i have included $scope.list.push({id:'1900',firstname: 'dummyElement', lastname: 'D'}); and ended up with error https://plnkr.co/edit/fUSfqmkK8AMabH4dnR56?p=preview . I tried using this.push too but not working — user222, Feb 06 '18 at 05:44

score 0 · Answer 1 · answered Feb 06 '18 at 06:07

If you want to add more elements you don't have to iterate using angular.forEach. You can directly push the object into the array.

var app = angular.module("app", []);

app.controller("BaseController", function($scope) { 
  $scope.title = "Angular.ForEach";
  $scope.list = [
    {id:'11',firstname: 'Joe', lastname: 'Michael'},
    {id:'12',firstname: 'Mishal', lastname: 'A'},
    {id:'133',firstname: 'Dex', lastname: 'T'},
    {id:'144',firstname: 'Rayan', lastname: 'K'},
    {id:'121',firstname: 'Riyya', lastname: 'R'}
  ];
  $scope.list.push({id:'1900',firstname: 'dummyElement', lastname: 'D'});      
});

<!DOCTYPE html>
<html>

<head>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body ng-app="app" ng-controller="BaseController">
    <h1>{{title}}</h1>

    <br/><br/> List:

    <br/><br/> {{list}}


</body>

</html>

score 0 · Answer 2 · answered Feb 06 '18 at 06:39

// Code goes here

var app = angular.module("app", []);

app.controller("BaseController", function($scope) { 
  $scope.title = "Angular.ForEach";
  $scope.list = [
    {id:'11',firstname: 'Joe', lastname: 'Michael'},
    {id:'12',firstname: 'Mishal', lastname: 'A'},
    {id:'133',firstname: 'Dex', lastname: 'T'},
    {id:'144',firstname: 'Rayan', lastname: 'K'},
    {id:'121',firstname: 'Riyya', lastname: 'R'}
  ];
   var count = 0;
   angular.forEach($scope.list, function(value, key){
    if($scope.list.length - 1 == count)
    {
      $scope.list.push({id:'1900',firstname: 'dummyElement', lastname: 'D'});
    }
    count++;
   });
   
});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="BaseController">
    <h1>{{title}}</h1>
    
    <br/><br/>
    List:
    
    <br/><br/>
    {{list}}
    
   
  </body>

</html>

If you don't need to use **angular.forEach** then directly push the elements into array - $scope.list.push({id:'1900',firstname: 'dummyElement', lastname: 'D'}); — Manvendra Priyadarshi, Feb 06 '18 at 06:50

score 0 · Answer 3 · answered Feb 06 '18 at 06:42

I saw your plunker and have made some edits please check it and see if that is what you need:

you were using alert to alert(value[0].firstname) which will always be undefined because inside forEach the value represents the individual value which is value[0],value[1] and so on for the next iterations at 0,1,.. index so you can access the current values just by using value keyword in that case.

as you said you just want to add one dummy data inside your array so there is no need to loop over the array you can simply use the push function to add one more item inside your array

$scope.list = [
  {id:'11',firstname: 'Joe', lastname: 'Michael'},
  {id:'12',firstname: 'Mishal', lastname: 'A'},
  {id:'133',firstname: 'Dex', lastname: 'T'},
  {id:'144',firstname: 'Rayan', lastname: 'K'},
  {id:'121',firstname: 'Riyya', lastname: 'R'}
];
$scope.list.push({id:'1900',firstname: 'dummyElement', lastname: 'D'});

the updated code: https://plnkr.co/edit/CDWs6kuimwho4pc79I22?p=preview

angualr.forEach to add one dummy element while iterating

3 Answers3