Dynamic Content: Getting response as HTML instead of JSON with SDK

[abhverma10]

I want to get the response from the SDK as HTML data instead of JSON so that I can utilize it directly in my React application without the need of creating components for each of the content assets.

Is there a way to do this? Somehow we can utilize the JSON and get the HTML using the schemas?

Right now I am doing the following to get the JSON response and then utilize this to render the content asset, but this requires me to create a component for each of the schemas.

import React, { createContext, useContext, useState, useEffect } from 'react'
import { init } from 'dc-visualization-sdk'

const VisualizationContext = createContext()

const useVisualization = () => {
  return useContext(VisualizationContext)
}

export const WithVisualization = (props) => {
  const [status, setStatus] = useState('')
  const [formModel, setFormModel] = useState()
  useEffect(async () => {
    setStatus('connecting')
    let removeChangedSubscription = undefined
    try {
      init({ connectionTimeout: 30000, debug: true })
        .then(async (sdk) => {
          const value = await sdk.form.get()

          removeChangedSubscription = sdk.form.changed((value) => {
            try {
              setFormModel(value.content)
            } catch (error) {
              console.error('Error in form change', error)
            }
          })

          sdk.form.saved((value) => {
            try {
              setFormModel(value.content)
            } catch (error) {
              console.error('Error in saving form', error)
            }
            window.location.reload()
          })

          sdk.locale.changed((value) => {
            window.location.reload()
          })

          setFormModel(value.content)
          setStatus('connected')
        })
        .catch((error1) => {
          console.error('Error in connection', error1)
          setStatus('failed')
        })
    } catch (err) {
      console.error('errr', err)
    }
  }, [])

  return (
    <VisualizationContext.Provider value={{ formModel }}>
      {props.children}
    </VisualizationContext.Provider>
  )
}

export const useContent = (content, vse) => {
  const { formModel } = useVisualization() || {}
  if (vse === '') {
    return [content, undefined]
  }
  if (formModel && formModel._meta?.deliveryId === content?._meta?.deliveryId) {
    return [formModel, content]
  }
  return [content, undefined]
}

[github-actions]

Welcome to Amplience community! Thanks so much for creating your first issue ✔️

[pixelscript]

Hi,

This SDK only supports returning content in JSON format that emulates the Content Delivery APIs.

Is your request related to using the content rendering service?

Thanks,

Chris