0

I am trying to render the bulletpoints using the Contentful Rich Text HTML renderer, however, the result is the following screenshot, where the bullet point list I want to result becomes [object Object]:

enter image description here

The following is my code:

<script>
import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
import { BLOCKS } from '@contentful/rich-text-types'

const contentful = require('contentful')
const config = {
  space: '341l220skrs9',
  accessToken: 'a2kEigyr-81a4J8sPyN1-UNU9R9eO3cPQDdKb0GkRWc',
}
const client = contentful.createClient(config)
export default {
  async asyncData({ params }) {
    const projects = await client.getEntries({
      'fields.slug': params.post,
      content_type: 'blogPost',
    })
    const newProjects = projects.items[0].fields
    console.log('DDD', projects)
    return {
      newProjectss: newProjects,
    }
  },
  data() {
    return {
      options: {
        renderNode: {
          [BLOCKS.EMBEDDED_ASSET]: ({
            data: {
              target: { fields },
            },
          }) =>
            `<img src="${fields.file.url}" height="${fields.file.details.image.height}" width="${fields.file.details.image.width}" alt="${fields.description}"/>`,
          [BLOCKS.UL_LIST]: (node, children) => <ul>{children}</ul>,
          [BLOCKS.OL_LIST]: (node, children) => <ol>{children}</ol>,
          [BLOCKS.LIST_ITEM]: (node, children) => <li>{children}</li>,
        },
      },
    }
  },
  methods: {
    documentToHtmlString(text) {
      return documentToHtmlString(text.body, this.options)
    },
  },
}
</script>

And this is what I am trying to render:

enter image description here

mntymccass
  • 27
  • 1
  • Try to use `console.log(JSON.parse(JSON.stringify(obj)))` to display the whole object and see its structure. Then, target a specific key to have access to the data or iterate on each element (depending on what's inside and what you want to achieve). You can probably also check the Network tab if you are doing that often (receiving data from some API) for faster inspection. This one could be useful too: https://stackoverflow.com/q/8892465/8816585 – kissu Sep 30 '22 at 07:40

0 Answers0