Using Protractor to select a child div id - protractor

Question

I'm having an issue pulling a child div ID for each row in the row.map function below.
In other words, for each row element I iterate, I want to pull rowId attrib:
<div id="rowId_21">
Here's an Html snippet:
<div ng-repeat="row in vm.sourceData.data" ng-init="thatRow=$index">
<div id="rowId_21" ng-class-odd="'row-2'" ng-class-even="'row-3'" >
<div ng-repeat="column in vm.sourceData.columns" >
<div ng-if="row[column.field].length !== 0" class="ng-scope highlight21">
<span ng-bind-html="row[column.field] | changeNegToPrenFormat" vm.highlightedrow="" class="ng-binding">
Sales
</span>
</div>
</div>
</div>
</div>
<div ng-repeat="row in vm.sourceData.data" ng-init="thatRow=$index">
<div id="rowId_22" ng-class-odd="'row-2'" ng-class-even="'row-3'" ng-class="vm.hideRow(row)" class="row-3 height-auto">
<!-- ... -->
</div>
</div>
I start with pulling the rows object, then I iterate them :
// pulls the data rows
var selDataRows = '.grid-wrapper.fluid-wrapper';
var rows = element(by.css(selDataRows)).all(by.repeater('row in vm.sourceData.data'));
rows.map(function (row, idx) {
//var thisRowId = row.element(by.css('div[id^="rowId_"]')); // *** RETURNS NULL
var thisRowId = row.all(by.xpath("descendant::div[starts-with(#id, 'rowId')]"));
thisRowId.getText().then(function(txt){
// RETURNS A VERY LONG ID: [ '7\n4\n41\n113\n3.3\n(34)\n(1.1)\n7...]
console.log('--- Curr Div ID: ', txt);
});
}).
then(function(){
console.log('*** Rows.Map Done.');
});
I thought this would pull the first child id (i.e. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors ):
by.css('div[id^="rowId_"]') ,
or perhaps this way:
by.xpath("descendant::div[starts-with(#id, 'rowId')]") ,
however neither seems to be working.
Advice appreciated...
Bob

Answer 1

First of all, you need to return from the mapping function. And, use .getAttribute() method to get the id attribute:
var selDataRows = '.grid-wrapper.fluid-wrapper';
var rows = element(by.css(selDataRows)).all(by.repeater('row in vm.sourceData.data'));
rows.map(function (row) {
return row.element(by.xpath("descendant::div[starts-with(#id, 'rowId')]")).getAttribute("id").then(function(rowId) {
return rowId;
});
}).then(function(ids) {
console.log(ids);
});