Currently, I am developing an application using Publii CMS, which utilizes Handlebars. Specifically, I am constructing a Vue app within the positions.hbs file. To create a JSON object, I am extracting a lengthy string from the CMS using Handlebars.
{{#getPostsByTags 30 "jobs" " "}}
jobsData.push(
{
"title": "{{ title }}",
"url": "{{ url }}",
"mainTag": "{{ mainTag.name }}",
"description": "{{ mainTag.description }}"
}
)
{{/getPostsByTags}}
The {{ mainTag.description }} snippet fetches the text stored in the CMS and triggers an error in the console.
SyntaxError: unterminated string literal
Upon inspection of line 45, it appears that there may be new lines or characters causing this error. The string on that line resembles the following:
https://i.sstatic.net/05ZEr.png
How can I sanitize or eliminate unwanted characters in Handlebars before passing them to the description value? I attempted to use JSON.stringify but without success.
"description": "JSON.stringify({{ mainTag.description }})"
[Learn More]
What is the best approach for sanitizing this string? Should I resolve this issue within the CMS itself? The stored text only contains <p> tags. How can I address this problem? Subsequently, I pass this data to the Vue app with the complete code below.
<script>
let jobsData = [];
{{#getPostsByTags 30 "jobs" " "}}
jobsData.push(
{
"title": "{{ title }}",
"url": "{{ url }}",
"mainTag": "{{ mainTag.name }}",
"description": "{{ mainTag.description }}"
}
)
{{/getPostsByTags}}
window.onload = function () {
var app = new Vue({
delimiters: ['${', '}'],
el: '#app',
data: {
jobs: jobsData
},
computed: {
sectionTitlesWithJobs: function () {
let tags = [];
this.jobs.forEach(job=> {
tags.push(job.mainTag)
})
tags = tags.filter((a, b) => tags.indexOf(a) === b)
return tags.sort();
}
}
});
}
</script>
This is what the problematic string looks like:
"<p>The Product team conducts user research, creates user experience, and works closely with the internal and vendor technology teams to prototype, develop, and maintain evolving digital tools. The team also leads outreach, training and customer service for the </a href="https://www1.nyc.gov/site/opportunity/portfolio/products.page">products in its portfolio</a>. The public-facing products include <a href="https://access.nyc.gov/">ACCESS NYC</a>,
<a href "https://growingupnyc.cityofnewyork.us/">Growing Up NYC</a>, and <a href="https://growingupnyc.cityofnewyork.us/generationnyc/">Generation NYC</a> and their related APIs.</p><p>The Product team works closely integrated with other NYC Opportunity teams, including the development, design, and data teams. It also engages with other program and technology staff across City government. The team helps NYC Opportunity and our agency partners translate anti-poverty program and policy goals into digital strategies. The team also helps define how the City of New York uses modern, agile and user-centric approach to technology products, includin...