Adding object to array in Angularjs

Question

I'm trying to understand the concept of custom filter in AngularJS. Therefor I've made a simple table which I want to filter. I know I can do the filtering simple with the built-in Angular filter, but I made this for exercise purpose. I know the filter is not completed yet. It doesn't return anything. First I want to solve the following:

I'm having a problem with adding an object to an array. It should be simple with array.push(object). But in the 'for loop' the previous object is being replaced by the new one. I don't know why that is happening. To investigate this problem I've added a few console.log's to see (and hopefully understand) what is happening. But I cannot figure it out.

There's is also another behavior I cannot explain: the loop is running twice: it goes through the same array (vm.players) a second time. Does anyone has an explanation for this behavior?

This is my angularJS script:

  var app = angular.module('main', ['angular.filter'])

    .filter('filterIns', function() {
      return function(input, ins) {

        var out = [];
        var obj = {};

        for (var i = 0; i < input.length; i++) {

          if (input[i].instrument == ins) {
            obj.name = input[i].name;
            obj.instrument = input[i].instrument;

            console.log(obj);
            out.push(obj);
            console.log('inside IF ' + i);
            console.log(out);
          }

        }

      }
    })

    .controller('DemoCtrl', function() {

      var vm = this;

      vm.players = [

        {
          "name": "Mariko",
          "instrument": "horn"
        }, {
          "name": "Kareem",
          "instrument": "cello"
        }, {
          "name": "Lance",
          "instrument": "horn"
        }, {
          "name": "Gail",
          "instrument": "flute"
        }, {
          "name": "Armand",
          "instrument": "cello"
        }, {
          "name": "Anika",
          "instrument": "flute"
        }, {
          "name": "Mallory",
          "instrument": "clarinet"
        }, {
          "name": "Odysseus",
          "instrument": "clarinet"
        }, {
          "name": "Colt",
          "instrument": "cello"
        }, {
          "name": "Kessie",
          "instrument": "violin"
        }, {
          "name": "Iola",
          "instrument": "horn"
        }
      ];

    });

And the html:

    <!DOCTYPE html>
    <html>

    <head>
      <script data-require="[email protected]" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
      <script data-require="[email protected]" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>
      <link rel="stylesheet" href="style.css" />
      <script src="script.js"></script>
    </head>

    <body ng-app="main">
      <div ng-controller="DemoCtrl as demo">

        <div>
          <table border="0">
            <tr>
              <th>name</th>
              <th>instrument</th>
            </tr>
            <tr ng-repeat="nr in demo.players | filterIns:'flute' ">
              <td>{{nr.name }}</td>
              <td>{{nr.instrument}}</td>
            </tr>
          </table>

        </div>
      </div>

    </body>

    </html>

Please have a look at this plunk

@UshmaJoshi: That did the trick: creating an empty object before the return function. Also a good point to add the object as a whole and not per key/value pair as I did in my first plunk. But still I have this question: why is the return function running a second time? I don't understand this behavior. — Jojoseph
– Jojoseph, Commented Oct 11, 2017 at 7:34

Icycool · Accepted Answer · 2017-10-11 10:32:03Z

2

Objects are references in javascript, as in other programming languages. Modifying anything in an object will affect all references that points to the same object.

So:

var obj = {a:1};
var obj1 = obj;

obj.a = 2;
console.log(obj1.a); // 2

To fix your issue, you'll need to create a new object in each loop

for (var i = 0; i < input.length; i++) {
  var obj = {a:xx, b:yy};
  // don't use obj.a = xx; obj.b = yy;
  out.push(obj);
}

edited Oct 11, 2017 at 10:32

answered Oct 10, 2017 at 11:36

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Thanks for explaining this!

Jojoseph
– Jojoseph

10/11/2017 07:39:36
Commented Oct 11, 2017 at 7:39

Add a comment |

Vishal Panchal · Accepted Answer · 2017-10-10 11:55:11Z

Array override previous value: It is because you are creating an object 'obj' outside of for loop. Please, create object inside the for loop in filter.

so filter code is like below:

.filter('filterIns', function(){
    return  function(input, ins) {
    console.log(ins);
    var out = [];
       for (var i = 0; i < input.length; i++) 
            if (input[i].instrument == ins) {
            var obj ={};
            obj.name = input[i].name;
            obj.instrument = input[i].instrument;
            out.push(obj);
            }
        }
         console.log(out);
    }

  })

Ushma Joshi · Accepted Answer · 2017-10-11 09:41:19Z

This is normal, angularjs uses a 'dirty-check' approach, so it needs to call all the filters to see if any changes exist. After this it detects that you have a change on one variable (the one that you typed) and then it re-executes all filters again to detect if it has other changes. This is the edited plunker for your object replaced issue.

.filter('filterIns', function(){
  return  function(input, ins) {
   var obj ={};
   var out = [];
   for (var i = 0; i < input.length; i++) {
     if (input[i].instrument == ins) {
       obj = input[i]; 
       out.push(obj);
     }
     console.log(out);
   }
 }

Here is another plunker same calling filter twice

Collectives™ on Stack Overflow

Adding object to array in Angularjs

3 Answers 3

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related