Knowledge Base

2. Escaping JSON

  • In this exercise, you will create a Custom Helper, "your_nameEscapeJson" that will allow you to escape text to ensure it's safe to use as JSON output.
  • You may want to escape text for safe JSON output any time content is being inserted into a JSON structure without strict control over its characters.
  • One situation / use-case where escaping becomes necessary: User-generated or editor-entered content
    Fields like page titles, descriptions, WYSIWYG content, or custom fields often contain:
    • Quotes (")
    • Line breaks
    • Backslashes
    • Special characters (e.g., emojis, HTML snippets)

    If you drop that directly into JSON, it can easily invalidate the structure.

Exercise 2.1: creating the "your_nameEscapeJson" Custom Helper

  1. Access the hidden section where your Custom Helpers are added via the bookmark you created at the start of training.
  2. Click on the Add Content button to create a new Custom Helper.
  3. Name: Give your Custom Helper a name, "your_nameEscapeJson". (There should be no spaces in the name field, use camel case as a convention for your Custom Helpers names).
  4. Function Code: Complete the TODO below to create your Custom Helper: 
    1. Return the JSON escaped string using the stringify method (HINT: Use the context parameter).
      Click here to view the solution:

      function (context, options) {

        //1. TODO: Return the JSON escaped string using the stringify method (HINT: Use the context parameter).
        return JSON.stringify(context);

      }

function (context, options) {

  //1. TODO: Return the JSON escaped string using the stringify method (HINT: Use the context parameter).
  return JSON.stringify();

}

  1. Click Save changes to save the changes to your Custom Helper.
  2. Go to Assets > Content Types.
  3. Click your content type name to edit it. (Use the Filter tool to search).  Open the Content layouts tab.
  4. The Content Layout tab is an area to add content layout(s) for your content type. Click into the "text/html" content layout to edit it.
  5. Add a Handlebars expression that uses the "your_nameEscapeJson" Custom Helper. Make sure you pass the "Description" element as an unnamed parameter using the publish Helper.
  6. Let's also look at an additional way of adding exception handling to your layouts. In this case, let's add an ifSet Helper to output the JSON text only if the Description element has been previously populated. This will avoid situations where an empty string (context) is passed to the Custom Helper.

Adding an ifSet Helper in the content layout provides you with a very useful and practical method of exception handling. Rather than having to handle an empty or null context within the Custom Helper code you can do it in the content layout instead.

{{#ifSet element="Description"}}
  <p>{{your_nameEscapeJson (publish element="Description")}}</p>
{{/ifSet}}

  1. Click Save changes to save the changes to your content layout.
  2. Go into the Home section of your site structure and update your existing content by adding text in the "Description" element.

Sample text to be converted to JSON:
"name": "[First Name]",
"last_name": "[Last Name]",
"academic_program": "[Computer Science]"

  1. Click Save changes to save your content.
  2. Update your preview to check the result.