loading

Accessing Nested Data| 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"
}
unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success 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"
      }
    }
    Error Success Question 2 of 3

    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"
      }
    }
    Error Success Question 3 of 3

    What notation do you use to access nested data?

    High five! ✋

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Splash Loading