The Document Object

Here we will discuss the document object for Prismic when using the Javascript development kit for a React.js project.

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.

Copy
{
  "id": "WKxlPCUEEIZ10AHU",
  "uid": "example-page",
  "type": "page",
  "href": "https://your-repo-name.prismic.io/api/documents/search...",
  "tags": [],
  "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"
  }
}

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

Copy
document.first_publication_date


Last Publication Date

Copy
document.last_publication_date


Language

Copy
document.lang


Alternate Language Versions

Copy
document.alternate_languages
// returns an array

You can read more about this in the Multi-language Rendering 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.

Copy
document.data.name

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