Protractor promise produces array that overrides previous values

Question

I have angular ui grid that I am trying to get values from its cells. Here is my list in table

  id name
   1 AUSTRIA
   2 BELGIUM
   3 BULGARIA
   4 CROATIA
   5 CZECH REPUBLIC

This is code I run:

element(by.id('grid1')).all(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index')).then(function (items) {
    for (var i = 0; i < items.length; i++) {
        var country = <any>{}; //typescript code

        self.gridTestUtils.dataCell('grid1', i, 0).getText().then(
        function (valueId) { 
            country.id = valueId 
        });

        self.gridTestUtils.dataCell('grid1', i, 1).getText().then(
        function (valueName) {
            country.name = valueName;
            self.countryList.push(country)
            console.log(self.countryList)                                
        });
    }
});

And this is result

[ { id: 1, name: 'AUSTRIA' }]

[ { id: 1, name: 'BELGIUM' }, 
{ id: 1, name: 'BELGIUM' }]

[ { id: 1, name: 'BULGARIA' },
  { id: 1, name: 'BULGARIA' },
  { id: 1, name: 'BULGARIA' } ]

[ { id: 1, name: 'CROATIA' },
  { id: 1, name: 'CROATIA' },
  { id: 1, name: 'CROATIA' },
  { id: 1, name: 'CROATIA' } ]

[ { id: 1, name: 'CZECH REPUBLIC' },
  { id: 1, name: 'CZECH REPUBLIC' },
  { id: 1, name: 'CZECH REPUBLIC' },
  { id: 1, name: 'CZECH REPUBLIC' },
  { id: 1, name: 'CZECH REPUBLIC' } ]

I expect result would look like:

[ { id: 1, name: 'AUSTRIA' }]

[ { id: 1, name: 'AUSTRIA' }, 
{ id: 1, name: 'BELGIUM' }]

[ { id: 1, name: 'AUSTRIA' },
  { id: 1, name: 'BELGIUM' },
  { id: 1, name: 'BULGARIA' } ]

[ { id: 1, name: 'AUSTRIA' },
  { id: 1, name: 'BELGIUM' },
  { id: 1, name: 'BULGARIA' },
  { id: 1, name: 'CROATIA' } ]

[ { id: 1, name: 'AUSTRIA' },
  { id: 1, name: 'BELGIUM' },
  { id: 1, name: 'BULGARIA' },
  { id: 1, name: 'CROATIA' },
  { id: 1, name: 'CZECH REPUBLIC' } ]

What is wrong with my code? What should I do that I have expected array

There is only one `country` variable across your loop, you are always pushing (and manipulating) the same object — Bergi, Sep 08 '15 at 21:58

taxicala · Accepted Answer · 2015-09-09T13:23:42.490

0

The problem is that i in your loop changes as the loops goes through, and in your async calls you are using i and getting a promise, but it's only a reference, so at the time the promises get resolved, the will have the reference to the variable with the last value of the loop. A workaround is to create an IIFE:

element(by.id('grid1')).all(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index')).then(function (items) {
    for (var i = 0; i < items.length; i++) {
        var country = <any>{}; //typescript code

        (function (i, country) {
            self.gridTestUtils.dataCell('grid1', i, 0).getText().then(function (valueId) {
                country.id = valueId;
            });

            self.gridTestUtils.dataCell('grid1', i, 1).getText().then(function (valueName) {
                country.name = valueName;
                self.countryList.push(country)
                console.log(self.countryList)
            });
        })(i, country);
    }
});

edited Sep 09 '15 at 13:23

answered Sep 08 '15 at 21:44

taxicala

21,408
7
37
66

1

Works like a charm, thanks a lot. Also thanks for being faster that @bergi who closes question – asdf_enel_hak Sep 09 '15 at 08:04
Why down vote @bergi ? – asdf_enel_hak Sep 09 '15 at 10:24
The promise callbacks don't use `i`. There is no problem with it. – Bergi Sep 09 '15 at 10:24
dataCell('grid1', i, 0) -> here is the use of i which you did not seem to notice, this function is getting a cell, and from that cell it's getting the text which returns a promise. – taxicala Sep 09 '15 at 13:23

Protractor promise produces array that overrides previous values

1 Answers1