Is it possible to locate subelements in protractor's .map? - protractor

Question

Is it possible to locate sub-elements in protractor's .map?
I'm trying to modify example code from here to parse ToDo items into a data structure.
describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get('https://angularjs.org');
element(by.model('todoList.todoText')).sendKeys('write first protractor test');
element(by.css('[value="add"]')).click();
var todoList = element.all(by.repeater('todo in todoList.todos'));
var todoStruct = todoList.map(function(el) {
return {
checkbox: el.element(by.model('todo.done')),
label: el.element(by.tagName('span')).getText()
};
});
todoStruct.then(function(resolvedTodoStruct) {
expect(todoStruct.length).toEqual(3);
expect(todoStruct[2].label).toEqual('write first protractor test');
});
});
});
From what I've read, map is the right choice for this kind of task. But for some reason, as soon as I use .element inside .map, protractor freezes. :(
Why would it happen? Did I miss anything?

Answer 1

I found a couple of work-arounds for this, though, while not pretty, seem work fine.
For the getText(), I moved the process of getting the text out of the JSON and then save the variable in the returned JSON.
For the element, the workaround is to wrap the element in a function:
var todoList = element.all(by.repeater('todo in todoList.todos'));
var spanText;
var todoStruct = todoList.map(function(el, index) {
var spanText = el.element(by.tagName('span')).getText().then(function(t){
return t;
});
return {
checkbox: function(){
return todoList.get(this.index).element(by.model('todo.done'));
},
label: spanText
};
});
Then when you want to access the element at a later time, you access as a function:
todoStruct.checkbox().click();

Answer 2

Yes, we can get sub elements from a map in the following way
getRows() {
return this.element.all(by.css('.ag-row')).map((row, index) => {
return {
index: index,
title: row.element(by.css("[colid=\"title\"]")).getText(),
operationStatus: row.element(by.css("[colid=\"operation_status_enum\"]")).getText()
};
});
}
// You can print this in the following way
this.getRows().then((rows) => {
for (var i=0; i<rows.length; i++) {
console.log(rows[i].title);
console.log(rows[i].operationStatus);
}
});