Group Templating with Javascript

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.

Copy
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.

Copy
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.

Copy
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);