Back
Accessing Nested Data | Yext Hitchhikers Platform
What You’ll Learn
In this section, you will learn:
- How to access data in your templates
- Difference between root-level and nested properties
Because the input JSON data can be organized in different ways, it’s important to know how to access the data depending on the JSON structure. To access values in the data that live below the root-level properties, you can use dot-notation. We’ll walk through an example of referencing these!
Root-level properties vs. Nested Properties
Root-level properties are the properties that sit at the root of the input data. In the data example below, the root-level properties are firstName, lastName and favorites.
The properties inside of the root-level properties are referred to as nested properties. In this example, food and color are nested under the top-level property of favorites. For this reason, we reference them using dot-notation, ex. {{favorites.food}}. The parent property is referenced before the period (favorites) and the child property is referenced after (food).
Input Data
{
"firstName": "Bryan",
"lastName": "Landen",
"favorites": {
"food": "Spaghetti",
"color": "Purple"
}
}Template
<h1>{{firstName}}'s Favorites</h1>
<table>
<tr>
<td>Food</td>
<td>{{favorites.food}}</td>
</tr>
<tr>
<td>Color</td>
<td>{{favorites.color}}</td>
</tr>
</table>Result
<h1>Bryan's Favorites</h1>
<table>
<tr>
<td>Food</td>
<td>Spaghetti</td>
</tr>
<tr>
<td>Color</td>
<td>Purple</td>
</tr>
</table>Evaluation Context
The evaluation context defines what is considered to be at the root-level of your input. In the above example, if the evaluation context was identified as favorites instead of the input data’s root-level, you could reference food or color in the expression. You’ll learn how to set the evaluation context with a #with block expression in the next unit.
Root-level evaluation context
{
"firstName": "Bryan",
"lastName": "Landen",
"favorites": {
"food": "Spaghetti",
"color": "Purple"
}
}Favorites as the evaluation context
{
"food": "Spaghetti",
"color": "Purple"
}
Daily Quiz Streak: 0
Quiz Accuracy Streak: 0
Question 1 of 3
Select the root level properties. (Select all that apply)
{
"color": "red",
"display": true,
"height": 300,
"sizes":
{
"small": "14px",
"medium": "16px",
"large": "20px"
}
}If I wanted to add the small size listed in my data object to my template, and my evaluation context is the root level data, what would I put in my template?
{
"color": "red",
"display": true,
"height": 300,
"sizes":
{
"small": "14px",
"medium": "16px",
"large": "20px"
}
}What notation do you use to access nested data?
Wahoo - you did it! 🙌
