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
– Md. Mahbubul Haque, Commented May 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

0

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.

answered May 24, 2015 at 7:19

Daniel Perez

7,1134 gold badges26 silver badges28 bronze badges

Collectives™ on Stack Overflow

cannot push object in an array using forEach loop in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related