cannot push object in an array using forEach loop in angular

Question

I am trying to input some color name and if the color is not present in the list it should get added to it and the li element should also get that particular color. I dont understand whats wrong with this

 <!DOCTYPE html> <html> <head></head> <body ng-app="colors"> <div ng-controller="mainCtrl as ctrl"> <ul ng-repeat="color in ctrl.colors"> <li ng-bind="color.label" ng-style="{color:color.label}"> </ul> <input type="text" ng-model="ctrl.colordisp"></input> {{ctrl.colordisp}} </div> <button type="button" ng-click="ctrl.checkColor()">submit</button> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script> angular.module("colors",[]) .controller("mainCtrl",[function(){ var self=this; self.colors=[ {label:"red"}, {label:"blue"}, {label:"green"} ]; self.colordisp="red"; self.checkColor=function(){ angular.forEach(self.colors,function(c){ if(c.label!==self.colordisp){ self.colors.push("label:"+self.colordisp); } }); }; }]); </script> </body> </html>

You are pushing the value as string into an array of objects. so firstly convert the pushing value into an object then push it into the array of objects. — Md. Mahbubul Haque, CommentedMay 24, 2015 at 7:24

dfsq · Accepted Answer · 2015-05-24 07:24:06Z

You have at least 3 issues.

Issue #1. Put ngClick button within controller container otherwise click will not be detected:

<div ng-controller="mainCtrl as ctrl"> <ul ng-repeat="color in ctrl.colors"> <li ng-bind="color.label" ng-style="{color: color.label}"> </ul> <input type="text" ng-model="ctrl.colordisp"> {{ctrl.colordisp}} <button type="button" ng-click="ctrl.checkColor()">submit</button> </div>

Issue #2. You need to push an object into array, not a string:

self.colors.push({label: self.colordisp});

Issue #3. Checking for object existence in array is currently not correct. You would better use either Array.prototype.filter or Array.prototype.some methods:

self.checkColor = function() { var inArray = self.colors.some(function(obj) { return obj.label === self.colordisp; }); if (!inArray) { self.colors.push({label: self.colordisp}); } };

Finally, minor one: remove </input> - input elements don't have closing tags (because they don't have content).

Demo:http://plnkr.co/edit/LBy5RCiXYApBEvuUoIdj?p=preview

Daniel Perez · Accepted Answer · 2015-05-24 07:19:55Z

You are adding a string, not an object.

Change your

self.colors.push("label:"+self.colordisp);

into

self.colors.push({label: self.colordisp});

The logic is also wrong, you should check if the color is present, and add if it is not, so for example:

 self.checkColor=function(){ var found = false; angular.forEach(self.colors,function(c){ if(c.label ===self.colordisp){ found = true; } }); if (!found) { self.colors.push({label: self.colordisp}); } }

would do the job.

Collectives™ on Stack Overflow

cannot push object in an array using forEach loop in angular

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related