Extracting the values of Field Collection

Question

I have created a foreach loop in my node template in Drupal 8 where values of the field collection are being printed as 1 and 2. Instead I want the content of the field collection which includes an image and two text fields to be printed here. How do I achieve that? Complete code would be helpful. My code:

 {% for member in content.field_robot['#items'].getValue()  %}
   <div class="robot-member">
      {{member.value}}
   </div>
 {% endfor %}

I have no experience of playing in the .theme file but can follow basic instructions.

Answer 1

You probably can find a way to solve the problem in the UI; look at Berdir's suggestions. If you want to add you own markup in the templates, you can try another strategy. You can use the Twig templates that come later, when the build array in content is processed.

First, put the field or field collection at any position where you want in the node template.

{{ content.field_robot }}

You can exclude this field from the content adding without() to avoid double content.

{{ content|without('field_robot') }}

Then enable twig debugging, and look at the source in the browser, which Twig templates the field collection and the fields that are in this collection are calling and change these templates.

You would probably find that the Twig code you are trying to put into the node is already in other templates, that you can see in the Twig debugging text. So there is no need to hack the render array in content, which can change at any time, when you update Drupal or install modules, or change the configuration of the node display.

Answer 2

Do you want to access the values or the rendered output of those field collections?

For the second, you're supposed to configure the view display to display the fields of the collection. I don't know how it works exactly. Looking at the code, the field collection itself should have a view display UI, just like the node itself, where you can configure each field.

If you want to access the values, then you should do the following:

1. Do not use getValue(). It returns non-computed properties only and it returns them as a simple array. You want the field item object.

2. content is the rendered output, node is the node object with the values. So, you'd use for item node.field_robot. Looking at the code, it seems you'd need to use item.getFieldCollectionItem() and from there, access a certain field again, e.g. item.getFieldCollectionItem().yourfield.value.

   But... from looking at the code a bit and that it has two major 8.x branches and not even an alpha release yet... it might be too early to use that project. Maybe you want to look at Inline Entity Form (8.x-2.x actually seems to depend on that) together with e.g. a node type or custom entity type or Paragraphs. We use the second quite actively and it's pretty well progressed for Drupal 8.

Answer 3

I got this to work using Berdir's advice. For example, I have a field collection called field_sponsors and I want the value of the field field_sponsor_role output in a node.html.twig file. So I write {{ node.field_sponsors.0.getFieldCollectionItem().field_sponsor_role.value }}. Note the 0 for just extracting the first item in the field collection. You could choose to loop through all of the items instead.

If the field is actually an entity reference, then you have to go deeper. In my field collection mentioned above, the field field_company is an entity reference. The value would just be the entity ID. But I want the name. So instead, I write {{ node.field_sponsors.0.getFieldCollectionItem().field_company.entity.label }}

Hope this helps.