How to return both title and value from Sanity list object?

9 replies
Last updated: Dec 7, 2022
Hello, I am returning an object from sanity that contains a list. The list contains title and value options. When the data is fetched, only the value is returned. How do I return both the title and value?
AI Update

Based on the documentation I found, it sounds like you're working with a string field that has a predefined list of options, where each option has both a title and a value property.

When you define a string field with options in your schema like this:

{
  title: 'Genre',
  name: 'genre',
  type: 'string',
  options: {
    list: [
      {title: 'Sci-Fi', value: 'sci-fi'},
      {title: 'Western', value: 'western'}
    ]
  }
}

Only the value is stored in your document - this is the expected behavior. The stored data will look like:

{
  "_type": "movie",
  "_id": "23407q-qwerqyt12",
  "genre": "sci-fi"
}

The title is only used for display purposes in the Studio interface, while the value is what gets saved to your content.

To access the title in your queries or frontend:

You have a few options:

1. Keep a mapping in your frontend code - Since the list is defined in your schema, you can maintain the same mapping in your frontend to convert values back to titles when displaying them.

2. Use GROQ to map the value - You can create a projection in your GROQ query that maps the value to its title:

*[_type == "movie"] {
  _id,
  genre,
  "genreTitle": select(
    genre == "sci-fi" => "Sci-Fi",
    genre == "western" => "Western",
    "Unknown"
  )
}

3. Store both title and value - If you absolutely need both stored in the document, you'd need to use an object type instead of a string type with a list, but this changes your data structure significantly and isn't the typical pattern.

The design where only the value is stored is intentional - it keeps your data normalized and makes it easier to change display labels without migrating existing data. The title is purely presentational for the Studio UI.

If you need help with previewing these values in list views in Studio, the documentation has specific guidance on how to display the title in document previews within the Studio interface.

Show original thread
9 replies
Please do show some code, much easier to help 😄
Schema:

{
name: ‘type’,
title: ‘Type:’,
type: ‘string’,
options: {
list: [
{
title: “Plant Seeds”,
value: “plant-seeds”
},
{
title: “Initial Tower Setup”,
value: “initial-tower-setup”
},
{
title: “Complete Tower Setup”,
value: “complete-tower-setup”
},
{
title: “Transplant”,
value: “transplant”
},
{
title: “Maintenance”,
value: “maintenance”
},
{
title: “Harvest”,
value: “harvest”
},
{
title: “Teardown”,
value: “teardown”
},
]
},
validation: (Rule) => Rule.required(),
},
Query:
`const query = `*[_type=='gardenEvent' && references('${getActiveProgram()._id}')]``
Only returns the value, not the title
Can you take a screenshot of what you get in vision with that query?
[

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "7aclSgufnQ9XHARYXhN99s",

"_rev": "T1LmJMY42FIQlwl7lqGGcK",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2023-01-24T14:46:18-05:00",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "maintenance"

},

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "7aclSgufnQ9XHARYXhN9BD",

"_rev": "T1LmJMY42FIQlwl7lqGGXI",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2023-01-31T14:46:18-05:00",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "maintenance"

},

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "7aclSgufnQ9XHARYXhN9Dt",

"_rev": "7aclSgufnQ9XHARYXhTDGr",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2022-12-20T14:46:18-05:00",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "complete-tower-setup"

},

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "T1LmJMY42FIQlwl7lq4toi",

"_rev": "T1LmJMY42FIQlwl7lqGGUm",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2022-12-13T14:46:18-05:00",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "initial-tower-setup"

},

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "T1LmJMY42FIQlwl7lq4trE",

"_rev": "T1LmJMY42FIQlwl7lqGGZo",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2022-12-06T19:46:18.074Z",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "plant-seeds"

},

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "T1LmJMY42FIQlwl7lq4twG",

"_rev": "T1LmJMY42FIQlwl7lqGGeq",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2023-01-17T14:46:18-05:00",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "maintenance"

},

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "T1LmJMY42FIQlwl7lq4uGO",

"_rev": "7aclSgufnQ9XHARYXhTDIC",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2023-02-07T14:46:18-05:00",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "maintenance"

},

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "drafts.7aclSgufnQ9XHARYXhN9Dt",

"_rev": "7aclSgufnQ9XHARYXhTDMD",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2022-12-20T14:46:18-05:00",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "complete-tower-setup"

},

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "drafts.T1LmJMY42FIQlwl7lq4toi",

"_rev": "rVRy5W0UdT6OoDK7hlv3aM",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2022-12-13T14:46:18-05:00",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "initial-tower-setup"

},

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "drafts.T1LmJMY42FIQlwl7lq4trE",

"_rev": "rVRy5W0UdT6OoDK7hlv3gP",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2022-12-06T19:46:18.074Z",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "plant-seeds"

},

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "drafts.T1LmJMY42FIQlwl7lq4twG",

"_rev": "T1LmJMY42FIQlwl7lqGGyy",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2023-01-17T14:46:18-05:00",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "maintenance"

},

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "drafts.T1LmJMY42FIQlwl7lq4uGO",

"_rev": "rVRy5W0UdT6OoDK7hlv3eO",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2023-02-07T14:46:18-05:00",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "maintenance"

},

{

"_createdAt": "2022-12-06T19:46:26Z",

"_id": "drafts.rVRy5W0UdT6OoDK7hllVSf",

"_rev": "T1LmJMY42FIQlwl7lqGGtw",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2023-01-10T14:46:18-05:00",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "maintenance"

},


"_createdAt": "2022-12-06T19:46:26Z",

"_id": "rVRy5W0UdT6OoDK7hllVSf",

"_rev": "T1LmJMY42FIQlwl7lqGGwS",

"_type": "gardenEvent",

"_updatedAt": "2022-12-06T21:41:17Z",

"active": false,

"due": "2023-01-10T14:46:18-05:00",

"program": {

"_ref": "rVRy5W0UdT6OoDK7hllSvP",

"_type": "reference"

},

"type": "maintenance"

}

]
The “type” for each object comes back as just the value. I’d like to return both the value and title.
Dont think you can do that (if i remember correctly)
The title you're specifying in your schema does not get written to your actual data when you're using a string field. If you want to make the title and the value available, you'll need to use an object instead.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?