Get field value from referenced entity in twig loop

Question

I have a content type with a multiple referenced field and I need to iterate trough each item and display the item information in a table but I don't know and didn't find a way to access the content field information like the value of a specific field.

Example: I have a content type called Task and in Task I have multiple Entity Reference to Worker content type, Worker has title, name and phone. How can I iterate each worker and display the information in a table?

What I want to do is to override node--task.html.twig to do something like this:

Assuming that we have a field_workers field in task content type.

<table>
   <thead>
     <tr>
       <th>
         Name
       </th>
       <th>
         Phone
       </th>
     </tr>
   </thead>
   <tbody>
    {% for worker in content.field_workers %}
     <tr>
       <td>
        {{worker.field_name.value}}
       </td>
       <td>
         {{worker.field_phone.value}}
       </td>
     </tr>
     {% endfor %}
   </tbody>
</table>

Is it possible? Thank you!

Answer 1

You want to work with node instead of content.

something like this should work

{% for item in node.field_workers %}
 {{ item.entity.field_name.value }}
{% endfor %}

See Entity API Cheat Sheet and my blogpost for more information: http://www.md-systems.ch/en/blog/techblog/2017/02/20/twig-and-entity-field-api-or-how-to-take-control-of-nodehtmltwig

Answer 2

As @Berdir explains in http://www.md-systems.ch/en/blog/techblog/2017/02/20/twig-and-entity-field-api-or-how-to-take-control-of-nodehtmltwig you have two options, use the node entity (see Berdir's answer) or the render array in content. For the content approach you have to put the table row in a second node template:

node--task.html.twig

<table>
   <thead>
     <tr>
       <th>
         Name
       </th>
       <th>
         Phone
       </th>
     </tr>
   </thead>
   <tbody>
     {{ content.field_workers }}
   </tbody>
</table>

node--worker--table.html.twig

     <tr>
       <td>
         {{ content.field_name }}
       </td>
       <td>
         {{ content.field_phone }}
       </td>
     </tr>

Disadvantage obviously is you need two templates. Advantage is, you can render the Worker fields how they are configured in UI and you can use text filters. Use a separate view mode table, so that you can display the Worker content type in other places as normal. You might also need to remove html from the field--field-workers.html.twig template if it's in the way of the table structure.