Using json API to display Rich Text

Need help APIs
1

I am using Contentful as a CMS for building my blog.

I have successfully set all APIs to get the data I am looking for, and so far I am having the only issue with the Rich Text format.

I need a text feature with some basic features such as underlined url, italic & bold, fonts, etc.

This is how I would like to see the the description:

image
image850×366 39 KB

But while trying to show it using a either text element or HTML, both are showing me quite naked results: (The first is a text element, the second one is HTML element).

image
image844×649 36.4 KB

Is it a big issue to fix it? I know zero about code and I all I was reading seem to be really complicated.emphasized text

2

Can you show the data you get from API?

3

image
image1009×754 42 KB

4

Can you show the raw data?

5 
{
"sys": {
    "space": {
        "sys": {
            "type": "Link",
            "linkType": "Space",
            "id": "sw4qwy3e7hhd"
        }
    },
    "id": "4EdwqmF67rxdt1yczD0n2j",
    "type": "Entry",
    "createdAt": "2019-09-05T00:08:36.335Z",
    "updatedAt": "2019-09-13T00:20:23.541Z",
    "environment": {
        "sys": {
            "id": "master",
            "type": "Link",
            "linkType": "Environment"
        }
    },
    "revision": 3,
    "contentType": {
        "sys": {
            "type": "Link",
            "linkType": "ContentType",
            "id": "blogPost"
        }
    },
    "locale": "en-US"
},
"fields": {
    "blogTitle": "IBM & JP Morgan in Global Blockchain Banking Market",
    "blogPublishedDate": "2019-09-21T00:00+03:00",
    "blogBody": {
        "data": {},
        "content": [
            {
                "data": {},
                "content": [
                    {
                        "data": {},
                        "marks": [],
                        "value": "Early this month, an official at China’s central bank said the bank is nearing the launch of its digital currency.",
                        "nodeType": "text"
                    }
                ],
                "nodeType": "paragraph"
            },
            {
                "data": {},
                "content": [
                    {
                        "data": {},
                        "marks": [],
                        "value": "\nBloomberg reported Monday August 12th that Mu Changchun, deputy director of payments unit at the People’s Bank of China (PBoC), said its team is close to completing the task of creating the systems needed to support a digital yuan offering.\n\nAlthough the PBoC’s project has been going for one year, recent news from Facebook has changed the motivation of the PBoC. In mid June of 2019 Facebook announced details of its ",
                        "nodeType": "text"
                    },
                    {
                        "data": {
                            "uri": "https://www.theblockcrypto.com/tiny/project-libra-facebook-to-launch-stablecoin-based-payments-network/"
                        },
                        "content": [
                            {
                                "data": {},
                                "marks": [],
                                "value": "Libra cryptocurrency project.",
                                "nodeType": "text"
                            }
                        ],
                        "nodeType": "hyperlink"
                    },
                    {
                        "data": {},
                        "marks": [],
                        "value": "\n\n",
                        "nodeType": "text"
                    }
                ],
                "nodeType": "paragraph"
            }
        ],
        "nodeType": "document"
    }
}
6

There’s nothing you can do because the API return just text a not html, bbcode or anything like this.

7

Thanks @Jici for your quick respond. I personally rely only on the community’s opinion at this stage as I am completely out of this knowledge of how to deliver a simple way of content.

It is quite important for me to stick the publishing structure using Bubble as a frame.

Is there anyone who has a creative solution or a loop hole for my case? I wouldn’t mind sponsoring this feature if it is under a realistic budget and if the rest of the community would find it useful.

8

Which API do you connect?

9

I’ve been using this GET:
https://cdn.contentful.com/spaces/sw4qwy3e7hhd/environments/master/entries/4EdwqmF67rxdt1yczD0n2j?access_token=bQcOOApcr-0aZDOmZmAMZsdRxGZV_wmB87PRknRJsyg

I might be choosing the wrong one?
I’ve found it over here:

https://www.contentful.com/developers/docs/references/

10

So there’s no solution for this?

11

@NigelG do you know how to solve this? I know you connected a blog to Contentful.

I have the same issue. I can’t get the rich text field from Contentful to display properly in Bubble.

12

Hi there.

I think I used a markdown to HTML converter.

Nigel.

13

@NigelG yeah I saw your old post about it. I can give that a try. Thanks.

Contenful has a rich text field option in their content model now so I was hoping I could call that without having to convert anything. The blog text is coming in but the formatting and images aren’t working.

Is there something about this API response that Bubble can’t handle?

rich text field api call
rich text field api call731×398 18 KB
bubble expression

14

@iliab did you ever figure this out?

15

No, that was not there when I used it.

There is probably something that renders JSON rich text … but I don’t think it is the same Rich Text that is in the Bubble element.

You can do it in node … so can probably write a server side plugin.

Or with some code on the page.

16

@NigelG Came across a couple of threads where you seem to have some expertise with Bubble and Contentful. I am pull the rich text json from the Contentful graphQL .

I am trying to use the javascript SDK from Contentful, which I can get to work in JSfiddle and on my local machine, but it doesn’t seem to work with Bubble even on a blank Bubble app with nothing else loading except this. Is there some restriction or conflict that I am not aware of that prevents loading external JS?

Here is the code that works everywhere else but Bubble…

<script src="https://npmcdn.com/contentful@3.3.5/browser-dist/contentful.js"></script>
<script src="https://npmcdn.com/marked@0.3.5/marked.min.js"></script>


 <div id="content" class="content-container"></div>

<script>
var contentfulClient = contentful.createClient({
  accessToken: '0e3ec801b5af550c8a1257e8623b1c77ac9b3d8fcfc1b2b7494e3cb77878f92a',
  space: 'wl1z0pal05vy'
})

var PRODUCT_CONTENT_TYPE_ID = '2PqfXUJwE8qSYKuM0U6w8M'

var container = document.getElementById('content')

contentfulClient.getEntries({
content_type: PRODUCT_CONTENT_TYPE_ID
  })
  .then(function(entries) {
container.innerHTML = renderProducts(entries.items)
  })

function renderProducts(products) {
  return '<h1>Products hello</h1>' +
'<div class="products">' +
products.map(renderSingleProduct).join('\n') +
'</div>'
}

function renderSingleProduct(product) {
  var fields = product.fields
  console.log(fields)
  return '<div class="product-in-list">' +
'<div class="product-image">' +
renderImage(fields.image[0], fields.slug) +
'</div>' +
'<div class="product-details">' +
renderProductDetails(fields) +
'</div>' +
'</div>'
}

function renderProductDetails(fields) {
  return renderProductHeader(fields) +
'<p class="product-categories">' +
fields.categories.map(function(category) {
  return category.fields.title
}).join(', ') +
'</p>' +
'<p>' + marked(fields.productDescription) + '</p>' +
'<p>' + fields.price + ' &euro;</p>' +
'<p class="product-tags"><span>Tags:</span> ' + fields.tags.join(', ') + '</p>'
}

function renderProductHeader(fields) {
  return '<div class="product-header">' +
'<h2>' +
'<a href="product/' + fields.slug + '">' +
fields.productName +
'</a>' +
'</h2>' +
' by ' +
'<a href="brand/' + fields.brand.sys.id + '">' + fields.brand.fields.companyName + '</a>' +
'</div>'
}

function renderImage(image, slug) {
  if (image && image.fields.file) {
return '<a href="product/' + slug + '">' +
  '<img src="' + image.fields.file.url + '" width="150" height="150" />' +
  '</a>'
  } else {
return ''
  }
}
</script>

Thank you in advance!