KITGOAL
Published in

KITGOAL

Displaying a field from Bubble.io Database to a Webpage

A non-conmprehensive guide that hopefully fills some gaps.

Go to the API tab of your Bubble App. It’s in the same row as APP PLAN and GENERAL.

Make sure the data type is selected (select the checkbox to the right of the name). Without this checked, API data can’t be transmitted.

Your data API root url will look like this:

https://your-domain.com/version-test/api/1.1/obj

Since I used the data type ‘postman’ mine ended up looking like this: https://kitgoal.com/version-test/api/1.1/obj/postman

You may want to create an API token to play around with in Postman.com. The token created will be a bearer token that you place into Postman. Create a workspace then place the copied token from Bubble in the Authorization tab.

If doing a POST, the BODY tab will need:

“Bubble field name” : “Any text you want to send”

If the post is successful you should see a success message and the Bubble ID.

To do a GET request, simply select GET instead from the Postman dropdown. A bearer token can be used or not depending on how it’s configured. Play around with it.

Check out the CodePen I made which shows a successful connection between Bubble and CodePen. Theoretically, this should work on any webpage where you can add JavaScript, HTML, and CSS.

https://codepen.io/nathanpuls/pen/gOoXKWR

Things I learned or did.

JSON Stringify is needed to convert data to display it properly.

The Replace method was needed to get rid of the quotes.

I used version-test (Bubble.io) so that my public data wouldn’t accidentally be modified.

Thanks for reading. My name is Nathan Puls and I enjoy building on the no code tool Bubble.io. Recently I made a web app called leap.by that lets you save and share links.

Reach out to hello@kitgoal.com with any questions or comments!

--

--

--

A web kit designed to make your life easier. Want to be a part of it? Visit Kitgoal.com

Recommended from Medium

Create an Elegant Login and Register Form on React

Introduce javascript filter && implement your own filter

Node.js Tutorial: Parsing CSV

JavaScript Basic Concepts

5 Key Concepts to Level Up Your JavaScript Skills

The Ultimate Guide To Gatsby

How to create a two-way navigation map

Deployment problem: XC_CRASH (SIGABRT) from React Native to iOS App Store(1)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nathan Puls

Nathan Puls

Voice Over | sayingthings.com

More from Medium

Free GST invoice generation tool!

BUILD YOUR OWN WEBSITE WITHOUT CODING — No-code solution for those who want to be digitised!

Louisville Tech Ecosystem Guide

Is Email Still Important in 2022?