The Document Object

Here we will discuss the document object for Prismic when using the Javascript development kit.

Before Reading

This article assumes that you have queried your API and saved the document object in a variable named document.

An example response

Let's start by taking a look at the Document Object returned when querying the API. Here is a simple example of a document that contains a couple of fields.

  • api-v2
  • api-v1
Copy
{
  "id": "WKxlPCUEEIZ10AHU",
  "uid": "example-page",
  "type": "page",
  "href": "https://your-repo-name.prismic.io/api/documents/search...",
  "tags": [
    "Tag 1",
    "Tag 2"
  ],
  "first_publication_date": "2017-01-13T11:45:21.000Z",
  "last_publication_date": "2017-02-21T16:05:19.000Z",
  "slugs": [
    "example-page"
  ],
  "linked_documents": [],
  "lang": "en-us",
  "alternate_languages": [
    {
      "id": "WZcAEyoAACcA0LHi",
      "uid": "example-page-french",
      "type": "page",
      "lang": "fr-fr"
     }
  ],
  "data": {
    "title": [
      {
        "type": "heading1",
        "text": "Example Page",
        "spans": []
      }
    ],
    "date": "2017-01-13"
  }
}
Copy
{
  "id": "WKxlPCUAAIZ10EHU",
  "uid": "example-page",
  "type": "page",
  "href": "https://your-repo-name.prismic.io/api/documents/search...",
  "tags": [
    "Tag 1",
    "Tag 2"
  ],
  "slug": "example-page",
  "slugs": [
    "example-page"
  ],
  "data": {
    "page.title": {
      "type": "StructuredText",
      "value": [
        {
          "type": "heading1",
          "text": "Example Page",
          "spans": []
        }
      ]
    },
    "page.date": {
      "type": "Date",
      "value": "2017-02-21"
    }
  },
  "rawJSON": {
    "page": {
      "title": {
        "type": "StructuredText",
        "value": [
          {
            "type": "heading1",
            "text": "Example Page",
            "spans": []
          }
        ]
      },
      "date": {
        "type": "Date",
        "value": "2017-02-21"
      }
    }
  },
  "firstPublicationDate": "2017-01-13T11:45:21.000Z",
  "lastPublicationDate": "2017-02-21T16:05:19.000Z",
  "lang": "en-us",
  "alternateLanguages": [
    {
      "id": "WZcAEyoAACcA0LHi",
      "uid": "example-page-french",
      "type": "page",
      "lang": "fr-fr"
     }
  ],
  "fragments": {
    "page.title": {
      "blocks": [
        {
          "type": "heading1",
          "text": "Example Page",
          "spans": []
        }
      ]
    },
    "page.date": {
      "value": "2017-02-21T00:00:00.000Z"
    }
  }
}

Accessing Document Fields

Here is how to access each document field.

ID

Copy
document.id


UID

Copy
document.uid


Type

Copy
document.type


API Url

Copy
document.href


Tags

Copy
document.tags
// returns an array


First Publication Date

  • api-v2
  • api-v1
Copy
document.first_publication_date
Copy
document.firstPublicationDate


Last Publication Date

  • api-v2
  • api-v1
Copy
document.last_publication_date
Copy
document.lastPublicationDate


Language

Copy
document.lang


Alternate Language Versions

  • api-v2
  • api-v1
Copy
document.alternate_languages
// returns an array
Copy
document.alternateLanguages
// returns an array

You can read more about this in the Multi-language Templating page.


Document Content

To retrieve the content fields from the document you must specify the API ID of the field. Here is an example that retrieves a Key Text field's content from the document. Here the Key Text field has the API ID of name.

  • api-v2
  • api-v1
Copy
document.data.name
Copy
// Assuming the document is of the type 'page'
document.getText('page.name')

Refer to the specific templating documentation for each field to learn how to add content fields to your pages.