How to use JSON in your Bubble App

Having a basic understanding of JSON can help you supercharge your Bubble application with powerful features. In this issue we cover the basics and explore some of the amazing things you can build.

Welcome to the first NoCodeSaaS issue published from Substack!

This week we are covering the basics of JSON and how learning the basics can help you add powerful features to your own Bubble application.

When I started with Bubble, I had essentially no idea what JSON was.

It felt very hard to understand and work with. However, once I learned a few of the basics I was able start using it to add some really powerful features to my application.

Here are a few of the things made possible in my app by using custom JSON.

• Custom CSV Exports. I use custom JSON and this excellent plugin to generate custom CSV exports for my users. The CSVs pull data from various database tables and structure it in a simple way. This takes a bit of custom JSON to build up the structure of the file, and also makes the recursive workflow which generates the file possible.

• Building custom API responses. I have used JSON to build up custom API responses for my application, this means rather than relying on the default Bubble formatting for API responses (which isn’t always ideal) - I can build a response which pulls data from multiple tables and formats it in a logical way.

• Using external APIs. When you’re working with external APIs you’ll often need to use JSON to make requests. Understanding the basics of how it works in Bubble and with the API Connector can help you avoid lots of common formatting errors.

• Interacting with 3rd party services. It’s useful to be able to understand Json when using third party services. For example, if you integrate tools like Intercom or Crisp, you’ll need to use a snippet of JSON to send through your custom variables.

These are just a few examples of how understanding JSON can give you superpowers when developing your Bubble app.

So with that said, let’s get started with the basics.

What is JSON?

JSON is essentially a lightweight way of storing and transferring data.

It’s hierarchical, which means you can nest data within a parent.

• The data are in name/value pairs

• Data objects are separated by commas

• Curly braces {} hold objects (individual things)

• Square brackets [] hold arrays (lists of things)

• Each data element is enclosed with quotes "" if it is a character, or without quotes if it is a numeric value

Formatting

JSON can store lots of different kinds of data.

• strings (a string of text)

• numbers

• objects (another JSON object)

• arrays (lists of objects)

• booleans (True or False)

• null (empty)

Each of these kinds of data needs to be formatted in a specific way for it to be valid json.

Here are the basics for each in terms of formatting you need to bear in mind…

Strings

For most people, strings are the most common data type you’ll use.

In the below example you can see we have a field for name with the value Bob

 { "name":"Bob" }

As you can see, we need to wrap both the field name and value with quotation marks “ “

For JSON to be be valid, each of those strings need to start and end with quotation marks, and there can’t be any added in between.

For example

 { "name":"Bob "Bobby" Brown" }

Is not valid Json and would fail because we’ve added in extra quotation marks in the string.

There are quite a few characters which you are not allowed to use inside a Json string.

In order to add these characters inside our string, they need to be escaped.

Here are some examples

• Double quote needs to be replaced with \"

• Backslash needs to be replaced with \\

• Backspace needs to be replaced with \b

• Form feed needs to be replaced with \f

• Newline needs to be replaced with \n

• Carriage return needs to be replaced with \r

• Tab needs to be replaced with \t

Fortunately, if you’re working in Bubble - it can take care of all of this for you!

Bubble has an operator called :formatted as JSON-safe

This takes the data from Bubble and does all this formatting for you automatically.

• It adds quotes around your string for you

• It automatically escapes disallowed characters

• It formats Boolean responses as true/false rather than the default Bubble yes/no

Using this operator makes it much much less likely you will have any issues with the JSON you’ve created.

Let’s take a look at a real life example of how this works in Bubble.

Here, we’re using the Javascript Toolbox plugin to send some information to Crisp about the user who is currently logged in.

To do this we have to use a little bit of JSON.

In the example for the first to fields (user’s email and user’s company) we’re going to use Bubble’s :formatted as JSON-safe operator

Just like the simple example above, we have some quotation marks around the field names

“user:email”

and

“user:company”

However, you’ll notice we havn’t added any “ “ marks around the values itself.

This is because Bubble is going to add them for us automatically.

In the below example, we don’t use the :formatted as JSON-safe option and just format the JSON manually…

This means we’re manually wrapping our Bubble data with quotation marks.

As we discussed earlier though, this can make this much more likely to fail.

For example, if this user’s company named contained a special character the whole call would fail.

We can totally avoid this by always using the Bubble json operator - then we can be confident that our JSON is always going to be formatted correctly

Numbers

Numbers work in a similar way - but do not require you to wrap them in quotation marks.

For example…

{ "name":"Bob", "age":30  }

Working with arrays of data

So, what about when we need to work with arrays, otherwise known as lists of things.

Here’s an example of an array in JSON.

{"subscribers":[
    { "Name":"Bob", "Email":"[email protected]" },
    { "Name":"Jane", "Email":"[email protected]" },
    { "Name":"Anna", "Email":"[email protected]" }
]}

As you can see, we have a subscribers object, and inside that we have a list of subscribers.

Each subscriber contains 2 values: Name and Email

When working with arrays like this there are few additional rules you have to follow to ensure the JSON is valid.

First of all, you need to wrap your array inside square brackets [ ]

So in the above example we have the field name subscribers and then an array of subscribers inside square brackets.

For each individual record inside the square brackets we need to wrap it inside surly brackets { } just like we would with any normal JSON.

You’ll also notice, after each individual record we have to place a comma ( , ) to signify this is a list of records.

We need to ensure we don’t put a comma on the final record in the list. If you add a comma after every single record it will result in invalid JSON.

Fortunately, Bubble can help us out with formatting arrays too!

Here’s an example of how it works in a my application.

This is a pretty complex example but bare with me - I will try and keep it as simple as possible!

In this example, we want the application to return a valid JSON object over our API.

Inside this object, we want to include a list of questions from our Bubble database.

As you can see, we’re going to wrap our response inside square brackets, are we’re making a list of things.

Then we build the Bubble search for the data we want to return, sort it if we need to and then select the :format as text operator.

This operator lets us build up the JSON list we need.

Once we’ve selected the :format as text operator we are shown this screen.

This lets us tell Bubble how we want each item in our list formatted.

As you can see, we’re building up another Json object in here.

To start with, we’re going to wrap this object in curly brackets because it’s a list of things.

Then for each field inside we declare our field name and value as normal.

You’ll notice at the bottom there’s a field for Delimiter.

This tells Bubble what symbol we want to use in between each record.

As we know from the formatting example above, we need to add a comma ( , ) in between each record to produce valid JSON.

By adding a comma in here, Bubble is going to automatically add that comma in between each record - and importantly, the final record will not have the comma.

How to check you have generated valid JSON

Once you’ve generated your Json object, it’s likely you’ll need to test it to make sure everything is formatted correctly.

To do that, run the page or workflow where your workflow lives, and then head to the Server Logs tab for your application

(Make sure you have request for API workflow checked if your JSON is on a backend workflow)

There’s you’ll find the fully formatted output of your JSON object, and you can see the full output Bubble produced.

Here’s an example for the API in this tutorial…

To check and validate the JSON object you’ve generated, copy all of this text from the first { to last }

Then, head over to this JSON Lint tool.

Paste in your JSON and hit the ‘Validate JSON’ button.

The site will analyze your JSON, if everything is good you’ll get a Valid JSON message like the above.

If something isn’t formatted correctly it will highlight what you need to fix.

For example, here we forgot to wrap a value in quotation marks…

It highlights the line where the error occurred and quickly shows you what to fix.

That’s it for this week!

I hope you found this issue helpful. It really is worth getting to grips with the basics of JSON, as it really can help you unlock some of the more advanced functionality of Bubble and help you develop killer features.

In future issues, we will delve more into some of the things you can build with a small amount of JSON.

If you have any feedback or comments, hit the reply button. I love to hear from you!

Happy building!

James.