Not able to highlight titles using _highlightResult

I have been trying to get the article titles to highlight in my search results and so far it will only return for keyword matches. I have been doing some research into this and can’t figure out why it’s skipping the actual title.

For example, doing a search for webhooks will highlight the word in the content but not the title.
I want it to highlight hierarchy.lvl2.value ("value": "About <em>Webhooks</em>"). I was trying to break up the template by creating an item template, I did try to place this line in the /helpers.js
_highlightResult.hierarchy.lvl2.value which returns _highlightResult is not defined
So I most recently attempted to place it in index.html which returns nothing.

Code Sandbox I am working out of: Edit algolia-instantsearch-media

app.js
helpers.js
index.html

{
  "hits": [
    {
      "url_without_variables": "https://bcstencildemo.docs.stoplight.io/api-docs/getting-started/webhooks/about-webhooks#about-webhooks",
      "weight": {
        "position": 3,
        "level": 0,
        "page_rank": 0
      },
      "tags": [],
      "hierarchy": {
        "lvl2": "About Webhooks",
        "lvl3": null,
        "lvl0": "API Docs",
        "lvl1": "Getting Started",
        "lvl6": null,
        "lvl4": null,
        "lvl5": null
      },
      "hierarchy_radio": {
        "lvl2": null,
        "lvl3": null,
        "lvl0": null,
        "lvl1": null
      },
      "url_without_anchor": "https://bcstencildemo.docs.stoplight.io/api-docs/getting-started/webhooks/about-webhooks",
      "url": "https://bcstencildemo.docs.stoplight.io/api-docs/getting-started/webhooks/about-webhooks#about-webhooks",
      "content_camel": "Events Available \n Authentication \n Lightweight Callback Payload \n Request and Response \n Recieving the Callback \n Responding to the Callback \n Callback Retry Mechanism \n Webhook Security \n Tools for Debugging \n All Available Webhooks",
      "content": "Events Available \n Authentication \n Lightweight Callback Payload \n Request and Response \n Recieving the Callback \n Responding to the Callback \n Callback Retry Mechanism \n Webhook Security \n Tools for Debugging \n All Available Webhooks",
      "hierarchy_camel": [
        {
          "lvl2": "About Webhooks",
          "lvl3": null,
          "lvl0": "API Docs",
          "lvl1": "Getting Started",
          "lvl6": null,
          "lvl4": null,
          "lvl5": null
        }
      ],
      "hierarchy_radio_camel": {
        "lvl2": null,
        "lvl3": null,
        "lvl0": null,
        "lvl1": null
      },
      "type": "content",
      "anchor": "about-webhooks",
      "no_variables": true,
      "objectID": "342070281",
      "_snippetResult": {
        "content": {
          "value": "Retry Mechanism \n Webhook Security \n Tools for Debugging \n All Available <em>Webhooks</em>",
          "matchLevel": "full"
        }
      },
      "_highlightResult": {
        "hierarchy": {
          "lvl2": {
            "value": "About <em>Webhooks</em>",
            "matchLevel": "full",
            "fullyHighlighted": false,
            "matchedWords": [
              "webhooks"
            ]
          }
        }
      },
      "_rankingInfo": {
        "nbTypos": 0,
        "firstMatchedWord": 12000,
        "proximityDistance": 0,
        "userScore": 822,
        "geoDistance": 0,
        "geoPrecision": 1,
        "nbExactWords": 0,
        "words": 1,
        "filters": 2
      }
    },
...

Hey Tatiana,

Note that attributesToHighlight takes an array of strings (your example passes a single string).

I made a working example on this sandbox.

Let me know if that helps.

I did try that. My helper.js looks like this now:

<p>${hit._highlightResult.hierarchy.lvl2.value}</p>

And I added in the array
attributesToHighlight: ["hierarchy.lvl2"]

Now I am getting

Unhandled Rejection (TypeError) Cannot read property 'hierarchy' of undefined

2nd troubleshooting attempt:

attributesToHighlight: [“hierarchy”]

Error:

Unhandled Rejection (TypeError)
Cannot read property 'value' of undefined
hitTemplate
/src/helpers.js:16:53
  13 | </div>
  14 | <h2 class="entry-title">
  15 |   <a href="${hit.url_without_anchor}">
> 16 |   <p>${hit._highlightResult.hierarchy.lvl2.value}</p>
     |                                           ^
  17 |   </a>
  18 | </h2>
  19 | <div class="post-excerpt">
View compiled
item
/src/app.js:32:25
  29 |   templates: {
  30 |     empty: "No results Here.",
  31 |     item(hit) {
> 32 |       return hitTemplate(hit);
     |                         ^
  33 |     }
  34 |   }
  35 | });

Not sure if this helps. I did find this

And it looks like when I remove _highlightResult and just use this:
It does return the correct text.

{hit.hierarchy.lvl2} - Correct text returns but not highlights {hit._highlightResult.hierarchy.lvl2} - Returns [object object]
${hit._highlightResult.hierarchy.lvl2.value} - is when I get the Type Error.