Question

JSON RTE embeded entries

  • 15 April 2024
  • 4 replies
  • 42 views
Beau Cowan
Badge

I’m working on a small side project, testing out the capabilities of the new JSON RTE field type in ContentStack by integrating it with a frontend UI like ChakraUI.  I’ve been able to get the basic formatting of default things like paragraphs, tables, lists and such, but I’m having a hard time figuring out how to get the data for an embedded entry.  This is using Next.Js, so I’m using the ContentStack node.js package

To give a small example, I have an entry type called Call To Action, which is just a model that holds a link, maybe an image, and gives a few other options for what the link can do.  I can choose to embed it into the JSON RTE, but I’m having a hard time figuring out how to get the data for it.  I’m already getting the data for the rich text with the .includeReferences() method, but I can’t figure out the fields that I need to get all of the data for those other entries.

I’ve attempted to use ‘rich_text.json_rte’, as those are the field names, but I’m not sure what the other field or options are to get the rest of the data.  I do get the UID and other data, but I don’t want to have to resort to a custom hook in React to get that information and render the component.  I’d rather attempt to keep everything in SSG and bring in the data all at once.

Is this even possible with the current build of ContentStack?

 

Tacos are never out of season

4 replies

P
Rank
Userlevel 1

Hi Beau,

 

Thank you for writing your query here!

To include the embedded items of the JSON RTE field, we’ll need to add the 'includeEmbeddedItems()' parameter in the SDK or API query. Here's an example in JavaScript query:

import * as Contentstack from 'contentstack'
const stack = Contentstack.Stack({
  api_key: '<API_KEY>', 
  delivery_token: '<ENVIRONMENT_SPECIFIC_DELIVERY_TOKEN>', 
  environment: '<ENVIRONMENT>'})
stack.ContentType('<CONTENT_TYPE_UID>')
  .Entry('<ENTRY_UID>')
  .toJSON()
  .includeEmbeddedItems() // include embedded items
  .fetch()
  .then(entry => {
    Contentstack.Utils.render({ entry, renderOption }) 
})

 

For more examples, you can refer to the following reference guides:

Javascript Utils: https://www.contentstack.com/docs/developers/sdks/utils-sdk/javascript/get-started-with-javascript-utils-library#basic-queries

Content Delivery SDK: https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference#entry-includeembeddeditems

I hope this helps! If you have any further questions or need assistance, feel free to ask!

Beau Cowan
Badge

I wasn’t as descriptive as I should have been with my initial request for help.  That is on me, and I apologize.

This field is part of a component that will be referenced into a page entry.  Since I’m already getting the data for the page entry, I want to drill down further and get the data for the JSON RTE items as well.

To give an example, I have the following structure:

  • Page 
    • Field - title
    • Field - content
    • Field - image
  • Component (Rich Text)
    • Field - heading
    • Field - eyebrow
    • Field - json_rte
  • Component (Nav Link)
    • Field - link
    • Field - label
    • Field - target

In this quick example, my Rich Text component can include entries from the Nav Link, but I only want to get call the data once from the Page entry.  What would I need to include in my .includeEmbeddedItems() to get the data from Nav Link to be part of the Rich Text json?

 

 

Tacos are never out of season
P
Rank
Userlevel 1

Hi Beau,

 

Sorry for the delay in getting back to you!

 

Yes, it appears that fetching the embedded entries [Component (Nav Link)] of the references [Component (Rich Text)] directly from the parent entry is not currently supported. For now, fetching the Rich Text component separately with .includeEmbeddedItems() seems to be the way to go. 

Beau Cowan
Badge

Understood.  I will test this later on then, and see what I can make of it,  Thank you for your time.

 

Tacos are never out of season

Reply


Terms & ConditionsCookie settings