In our third blog on using placeholders with the Emarsys API, we will look at using nested JSON objects.
Use case
For nested JSON objects, it’s hard to provide a plausible real life scenario because it depends a great deal on the setup of your website. You could argue that there is never a good reason to use nested objects, but if your website is built using JavaScript with a lot of nested objects, then it’ll automatically result in nested objects inside the JSON. So it’s worth knowing about it.
We’ll look at a shop selling guitars, with both the customer information and the products nested inside the global object. And we’ll throw in a foreach loop for good measure.
First let’s look at the HTML:
<html>
<head>
<title>API Exercise 3 Example</title>
</head>
<body>
<h2>
Exercise 3 - Nested Objects
</h2>
<p>
Please find your order details below:
</p>
<ul>
<li>First Name: {{event.global.objects.firstName}}</li>
<li>Last Name: {{event.global.objects.lastName}}</li>
<li>Membership Number: {{event.global.objects.membershipNumber}}</li>
<li>House Number: {{event.global.objects.houseNumber}}</li>
<li>Street Name: {{event.global.objects.streetName}}</li>
<li>County: {{event.global.objects.County}}</li>
<li>Country: {{event.global.objects.Country}}</li>
</ul><br>
{% foreach record in event.global.products %}
<ul>
<li>Product Name: {{record.productName}} </li>
<li>Brand: {{record.brandName}}</li>
<li>Description: {{record.Description}}</li>
<li>Price: {{record.Price}}</li>
<img src="{{record.imageUrl}}" />
</ul>
{% endforeach %}
</body>
</html> We have two sections in this HTML.
-
- The first section describes the user’s personal details such as the first name, last name, membership number, etc. This is not an array or a loop, because the user will only have this information once.
-
- The second section uses a foreach loop to loop through an array, to display the items purchased in this order.
The nesting comes in the event.global.xxxxx – you can see that in the first section which has the personal information, there is a sub-object called objects, which is part of the global object.
The second part uses the same global object as the first part, but it has a sub-object called productName.
We can nest as deep and as much as we want, using dot notation to separate each level. However, it is not common to see more than two levels deep, as things can get very unreadable very quickly inside the JSON.
Let’s have a look at the JSON for this example:
{
"key_id": 3,
"external_id": "elston.gunn@example.com",
"data":
{
"global":
{
"objects":
{
"firstName": "Elston",
"lastName": "Gunn",
"membershipNumber": "82364",
"houseNumber": 66,
"streetName": "Albert Street",
"County": "Kent",
"Country": "United Kingdom"
},
"products":
[
{
"productName": "Fender American",
"brandName": "Fender",
"Description": "A Fender American Original guitar",
"Price": "€1200,-",
"imageUrl": "https://myguitars.com/electric/fender-american-professional-stratocaster.jpg"
},
{
"productName": "Gibson Les Paul Original",
"brandName": "Gibson",
"Description": "A Gibson Les Paul Guitar",
"Price": "€2000,-",
"imageUrl": "https://myguitars.com/electric/gibson-les-paul-original.jpg"
},
{
"productName": "PRS Original",
"brandName": "Paul Reed Smith",
"Description": "An authentic Paul Reed Smith guitar",
"Price": "$3195,-",
"imageUrl": "https://myguitars.com/electric/prs-original.jpg"
}
]
}
}
} So inside the global object, we have the objects object AND we have the products object. In the HTML, this is defined with dot notation. Each dot indicates one level of nesting deeper.
When we trigger this campaign, it gives the following result in an email:
And that’s it – I hope you found it useful!
