Protractor filter, how to find elements within filtered elements

Question

Below is some shortened HTML that I have, and an attempt at some protractor code.

What I'm trying to do, is do a click on an i element. I'd like to be able to do the click, based on what the ID is, which is in a sibling element.

The below code doesnt work. I've also tried doing a filter inside a filter, and everything I try is causing errors. Can anyone help please? The error I get with this attempt is "Cannot read property element of undefined.

Can anyone help with this please? Have spent a lot of time on this so far!

Thanks.

element.all(by.repeater('data in ctrl.data')).filter(function(elem){
    return elem.element(by.css('div.case-info span')).getText() == id
}).then(function(filteredElements){
    filteredElements.first().element(by.css('i.fa')).click();
});




<div ng-repeater="data in ctrl.data">
    <div class="case-info">
        <span>AN ID HERE</span>
        <div>Other stuff here thats not really relevant</div>
    </div>
    <i class="fa fa-red"></i>
</div>

Answer 1

Here's what worked for me in the end, with help from the above two answers...

element.all(by.repeater('data in ctrl.data')).filter(function(elem){
    return elem.element(by.css('div.case-info span')).getText().then(function(text){
        return text === id;
    });
}).first().element(by.css('i.fa')).click();

Thanks for your help.

Answer 2

You've almost got it... as @igniteram1 said, you just need to wait for getText() to return it's promise (though I would advise against using an expect in the loop). Something like this...

element.all(by.repeater('data in ctrl.data')).filter(function(elem){
    return elem.element(by.css('div.case-info span')).getText().then(function(text){
        return text === id;
    }) ;
}).then(function(filteredElements){
    filteredElements.element(by.css('i.fa')).click();
});