How to debug data in underscore template?

Question

I am trying to customize Algolia code for showing search results, the following code is inside a template that I am free to change. In their documentation they say that they are using underscore templating.

How can I debug what is inside data? I don't know on top of my head what values are where, so I would like to print whole object on the page (like console.log or var_dump) so I know what can I work with.

<script type="text/html" id="tmpl-instantsearch-hit">

    <div class="ais-hits--content">
        <h2><a href="{{ data.permalink }}" title="{{ data.post_title }}">{{{ data._highlightResult.post_title.value }}}</a></h2>
        <div>
            <# if ( data._snippetResult['content'] ) { #>
                <span class="suggestion-post-content">{{{ data._snippetResult['content'].value }}}</span>
            <# } #>
        </div>
    </div>

</script>

I tried {{ data }} but it only shows as [object Object] so I can't see what is inside

Answer 1

Try {{ JSON.stringify(data) }}. Read more on why .toString(), which is what is automatically done when you simply do {{ data }} (it evaluates to ...your component... + data.toString() + ...your component...), does not work with objects here.