Braze Tutorial: How To Navigate Connected Content Data

In a previous post, we were left with a daunting amount of data from a Connected Content call. Connected Content can be super useful, but only if you know how to correctly navigate the data to grab the necessary fields. Let’s dive right in!

Making Connected Content API Call — Reminder

To continue where we left off in the last post, go to Messaging → Campaigns → Create Campaign → Email.

Name the Campaign “Random Cat Facts”, click HTML Editor (should be the default), choose “Blank Template”, click “Edit Email Body”, and copy and paste the Connected Content script below inside the Message:

{% connected_content https://catfact.ninja/facts :save cat_facts %}

If you click on the “Test” tab, you’ll see every single data pulled from the Catfact.Ninja’s API endpoint.

Also, even though we installed the JSON Formatter Chrome Extension in our last post, you can see that the data still isn’t beautified inside Braze.

That’s because Braze uses a slightly different version of JSON that isn’t recognized by most JSON formatters.

However, there is one resource that I always use when I’m working with Braze Connected Content, which is https://jsonformatter.curiousconcept.com/.

Now, there are tons of JSON Formatters out there. However, among the many that I’ve tried and tested, this one from Curious Concept is the only one that can still work with Braze’s atypical JSON format.

If you copy and paste the Connected Content data from Braze and paste it into the Curious Concept formatter, even though we’re still getting the invalid error highlighted in red, we can actually still collapse and expand the different parts of this data. This is basically the same thing as what we saw with our Chrome Extension.

So please keep this resource handy if you’re unable to view the data in your browser, but since our endpoint is publicly-accessible, we will go back to the URL directly to talk about the data some more.

So before we jump into Braze, we need to understand the type of data we’re working with and talk about some different datatypes.

Data Structures and Types

So if you collapse all the main fields, this is what you get:

The API endpoint returns a bunch of fields like current_page, data, first_page_url, and handful others, many that aren’t exactly necessary for us.

What we’re most interested in are the random cat facts! Where are they hiding?

Well, after a bit of expanding, we can quickly find them living under “data”.

And one important thing to note is that because we see the square bracket “[“ at the start of “data”, we also know that “data” is an array.

This makes sense, because array is like a list of comma-separated items, and in our case, it’s a list of random cat facts. And there’s one more layer to each of these items in the “data” array.

Because we see curly brackets “{}” within each array item, we know that each item has the datatype object. In fact, the entire data that this API endpoint provides is also an object.

There’s the parent-level object, then an array called “data” inside the object, then a bunch of objects inside the “data” array that contains “fact” and “length”.

And ultimately, it is the “fact” that is what we want to render in our messages. Our long-awaited cat facts.

So now that we understand the structure of this data better, let’s step into Braze and use Connected Content to pull the very first cat fact.

Braze Connected Content Syntax

So, the first field that we’re interested in is called “data”. And since the entire data, not to be confused the array “data”, is an object, we use’ll use a syntax called dot notation to navigate inside the entire data.

By the way, the entire data is also called “payload”, so we’ll call the entire data “payload” from now on, so we don’t get confused with the actual array field called “data”.

To navigate from the payload into the array “data”, we add “.data” after “cat_facts”, all within the curly brackets. This tells the Connected Content to go one level deeper into the “data” field.

{% connected_content https://catfact.ninja/facts :save cat_facts %}

One thing we’d like to note here is that although the curly brackets inside our payload indicate that the datatype we’re working with is an object, the curly brackets that you see in our Liquid code have a different meaning.

Here, the curly brackets are simply Liquid syntax that’s necessary to write Liquid tags and render Liquid variables. The curly brackets here don’t have anything to do with objects. So we wanted to clarify that here.

Let’s go ahead and click the Preview tab.

Okay, a little better, still not great.

We don’t see other fields like current_page, first_page_url, etc. which is great, but we still have way too many other characters being returned here.

Now that we’re in the “data” array, what we’ll do next is navigate to the first of the 20 items that’s being returned in this “data” array.

With arrays, we use bracket notation, and we always starting counting from 0.

So the first item of the “data” array can be pulled by adding “[0]” at the end of the rendering we have so far, once again, within the curly brackets. This is what it looks like.

{% connected_content https://catfact.ninja/facts :save cat_facts %}

This will grab just the first item from the “data” array from our “cat_facts” payload.

Okay, we’re getting close! Down to the last layer of this data navigation! We can see clearly what the random cat fact is, which is pretty interesting by the way.

But we still don’t want all the curly brackets, the quotations, the length, and just everything else besides the actual fact itself.

If you remember, each data array item is actually another object itself, and the biggest clue is that they’re surrounded in curly brackets.

So once again, we use dot notation to extract the field that we want exactly.

In our case, we want the fact, and we don’t care too much about the length, although I can totally see a use case for needing the length, like if you have to keep under a certain character count, for example.

So one last time, we will add the dot notation syntax at the end of the variable rendering we have so far, by adding “.fact” at the end, which looks like this below:

{% connected_content https://catfact.ninja/facts :save cat_facts %}

And for the final time in our video, let’s click the Preview tab to see our beautiful cat fact, rendered perfectly, only showing the exact part that we were looking for.

And of course, if you want to render the second fact, then you’d simply change the index inside the bracket notation, which looks like this:

Remember, since we start counting from 0, the first item is 0, the second item is 1, and so on and so forth.

Thank you!

To summarize, when you’re navigating JSON data, most of the times, as long as you understand how to navigate objects and arrays, you should be able to extract the exact data that you’re looking for.

Of course, there are more complicated data structures you might work with, or you may want to render data in a more complex way, like using For Loops, Conditionals, and more.

If you have any questions, please share them in the comments. We’re happy to help! 🙏

If you learned something from this tutorial, please subscribe for more awesome Braze tutorials in the future!

Thank you for reading, and see you next time!

allan@fornowmarketing.com

fornowmarketing.com