Templating the Group field

The Group field is used to create a repeatable collection of fields.

Repeatable Groups

Example 1

Here is how to retrieve all the content within a Group field with the API ID of references.

document.data.references.map(function(reference) {
    return {
        url: reference.link.url,
        label: reference.label

Example 2

Here's another example that shows how to retrieve a group of images (e.g. a photo gallery) from a Group field with the API ID of photo_gallery.

document.data.photo_gallery.map(function(imageWithCaption) {
    return {
        url: imageWithCaption.photo.url,
        caption: imageWithCaption.caption

Non-repeatable Group

Even if the group is non-repeatable, the Group field will be an array. You simply need to get the first (and only) group in the array and you can retrieve the fields in the group like any other.

Here is an example showing how to retrieve the content of the fields in a non-repeatable Group with the API ID of banner_group. In this example the group contains an Image, Link, and two Rich Text fields.

var PrismicDOM = require('prismic-dom');

// Get the first and only element in the group array
var banner = document.data.banner_group[0];

// Retrieve the group content
var bannerImageUrl = banner.banner_image.url;
var bannerText = PrismicDOM.RichText.asText(banner.banner_text);
var bannerLink = PrismicDOM.Link.url(banner.link, linkResolver);
var bannerLinkLabel = PrismicDOM.RichText.asText(banner.link_label);

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.