JSONstringify and double curly braces

[ileana2019]

Hello,
I am using the PnP modern search in SharePoint which is using the handelbars-helpers. One of the web components inside is the pnp-details-list with the following properties (which works fine, using the JSONstringify inside the data-columns-configuration):
<pnp-details-list data-items="{{JSONstringify items}}" data-columns-configuration="{{JSONstringify detailsListColumns}}" data-show-file-icon="{{@root.showFileIcon}}" data-is-compact="{{@root.isCompact}}"></pnp-details-list>

If I replace the data-columns-configuration with the following:
data-columns-configuration="[{"uniqueId":"986cc099-2e5f-47e9-8b3e-aaa4bcaf8f50","name":"Actions","value":"{%replace ParentLink 'AllItems' 'DispForm'%}","useHandlebarsExpr":true,"minWidth":"70","maxWidth":310,"enableSorting":null,"isResizable":null,"isMultiline":null,"isResultItemLink":null,"sortIdx":1}]"
it doesn't work anymore (the value inside the JSON is ""; I expect it to be "{{replace ParentLink 'AllItems' 'DispForm'}}" in the DOM).
data-columns-configuration corresponds to this JSON:
[{ "uniqueId": "986cc099-2e5f-47e9-8b3e-aaa4bcaf8f50", "name": "Actions", "value": "{{replace ParentLink 'AllItems' 'DispForm'}}", "useHandlebarsExpr": true, "minWidth": "70", "maxWidth": 310, "enableSorting": null, "isResizable": null, "isMultiline": null, "isResultItemLink": null, "sortIdx": 1 }]
I think it is because of the double curly braces which are interpreted as a code and not as string inside the template.
So how can I use JSONstringify to stringify the above JSON?
I also created an issue on the pnp-modern-search github and they advise to contact this forum.
Thanks!

[Tin-Bui]

I think I have the same problem with you. I was trying to hardcode the list column config into the details list layout.

This worked for me:

1. html escape the json value
2. put an "\" (backslash) in front of any opening double curly bracket

So, your template was:

<pnp-details-list data-items="{{JSONstringify items}}" data-columns-configuration="{{JSONstringify detailsListColumns}}" data-show-file-icon="{{@root.showFileIcon}}" data-is-compact="{{@root.isCompact}}"></pnp-details-list>

with the {{JSONstringify detailsListColumns}} equal to:

[{ "uniqueId": "986cc099-2e5f-47e9-8b3e-aaa4bcaf8f50", "name": "Actions", "value": "{{replace ParentLink 'AllItems' 'DispForm'}}", "useHandlebarsExpr": true, "minWidth": "70", "maxWidth": 310, "enableSorting": null, "isResizable": null, "isMultiline": null, "isResultItemLink": null, "sortIdx": 1 }]

--> this should work:

<pnp-details-list data-items="{{JSONstringify items}}" data-columns-configuration="[{ &quot;uniqueId&quot;: &quot;986cc099-2e5f-47e9-8b3e-aaa4bcaf8f50&quot;, &quot;name&quot;: &quot;Actions&quot;, &quot;value&quot;: &quot;\{{replace ParentLink 'AllItems' 'DispForm'}}&quot;, &quot;useHandlebarsExpr&quot;: true, &quot;minWidth&quot;: &quot;70&quot;, &quot;maxWidth&quot;: 310, &quot;enableSorting&quot;: null, &quot;isResizable&quot;: null, &quot;isMultiline&quot;: null, &quot;isResultItemLink&quot;: null, &quot;sortIdx&quot;: 1 }]" data-show-file-icon="{{@root.showFileIcon}}" data-is-compact="{{@root.isCompact}}"></pnp-details-list>

[doowb]

Thanks @Tin-Bui for a solution.

I'm going to close this because:

• The original question was solved in the linked pnp-modern-search issue.
• This is related to handlebars in general and not specific to this library (handlebars-helpers).
• An alternative solution was provided above.