#each over an array entered in config

[michaelthwaite]

I'd like to enter an array of [ { "feature":"Price", "description":"The price is set at the checkout" } ] in a text area and then iterate over it in the .hbs file. I can output @config.custom.myArray but not iterate over it. I was assuming {{#each @config.custom.myArray}} but that's not working. Anyone have this working?

Thanks, Michael.

[michaelthwaite]

Solved:

I added a helpers.js file to the root of the theme containing a helper to convert a JSON string to an array :
`
/*

• Custom theme helpers for Handlebars.js
  */

let themeHelpers = {
deserialize: function (value) {
try {
return JSON.parse(value);
} catch (e) {
console.error(e);
return [];
}
}
};

module.exports = themeHelpers;
`

Then consume the array:

{{#each (deserialize @config.custom.myJsonString)}} {{feature}} {{description}} {{/each}}

[candidexmedia]

Hi @michaelthwaite ! I'm glad you found a solution, and I'm also really interested in what's going on here. Do you mind explaining your use case? 😊

[michaelthwaite]

I'm building out a new site at https://fdhome.pages.dev which is a replica of the old https://www.fooddays.com

If you scroll down to the 'Flavors' section on the home page, I have a table of features available for each flavor and wanted to program this but still keep it somewhat user configurable and DRY as it appears fours times.

Ideally, I'd like the option to have config.json options that allow arrays, i.e. an array of [{feature:"",detail:""}] which HubSpot, the current CMS supports.

[candidexmedia]

I see! So would the user enter the features and details as a JSON list/array inside a text box in a Theme setting?

[michaelthwaite]

Exactly, it's not ideal but tools like Power JSON and Rider even, make it easy to manage:

[{"feature":"Initial System Setup with Three Hours of Training","detail":"<p>We'll take care of setting the system up for you including collecting the themes and menus.</p><p>We'll then follow up with a call &amp; screen share to show you what options and choices we've made and we'll tailor those together before handover of the running of the system.</p><p>Training is initially three hours but additional time can be purchased from our options menu.</p>"},{"feature":"Flexible, Feature Rich, School Focused Ordering Platform","detail":"<p>Get unlimited access to <em><strong>all</strong></em> of the features available with the myFoodDays platform.</p><p>With 20 years of experience, the myFoodDays platform offers a wealth of features that are impossible to encompass in a few words!</p><p>There are no limits on the size of the service or the number of parents or administrators.</p>"},{"feature":"Basic Email Support for Parents and Admins - Monday - Friday","detail":"<p>Get questions answered Monday-Friday via our tech support email with the human touch.</p><p>We look after the parents, assist them with ordering and act as your helpers when it comes to managing everyone.</p>"},{"feature":"Access to FoodDays PTO Tools","detail":"<p>Get access to a suite of useful tools to help PTOs do their work:</p><ul> <li>Volunteer management</li> <li>Email sender</li> <li>Committee management</li> <li>Events coordination</li> <li>Surveys and more!</li> </ul>"},{"feature":"Pricing: Percentage &amp; No Annual Fees","detail":"<p>The system is paid for through a processing fee that we add to the price of the items sold. It can be baked into the price of the item or added at checkout - you choose!</p> <p>The processing fee covers everything! All support, reporting, processing of orders and payment gateway fees. We send you a monthly payment for everything collected for your fundraiser. We also handle the finance side of transactions including any disputes, chargebacks and the variable cost of processing.</p> <p>You retain control of the prices quoted and the fundraising amount collected so that you can offer discounts however you like and/or support free/reduced lunch programs.</p> <p>There are no setup or early termination fees - use the system as little or as much as you like!</p>"}]

[candidexmedia]

I see... I admit, I have no idea what Power JSON and Rider are, so this topic may be above my own level of web technologies knowledge. 😅

If I was tasked with this, I would probably look into the Smart Replacer plugin OR replaceContent helper.

So instead of...

{
"feature":"Initial System Setup with Three Hours of Training",
"detail":"<p>We'll take care of setting the system up for you including collecting the themes and menus.</p>"
}

I would type something like this in the text box:

[A]Initial System Setup with Three Hours of Training[B]
We'll take care of setting the system up for you including collecting the themes and menus.[C]

And then use one of the two methods to create rules to replace those bracketed expressions with what I actually want, for example:

Turn `[A]` into `<details><summary>`
`[B]` into `</summary>`
`[C]` into `</details>`

So that that initial text that was typed into the text box turns into this when the site is generated:

<details><summary>Initial System Setup with Three Hours of Training</summary>
We'll take care of setting the system up for you including collecting the themes and menus.</details>

OR, I would use the TinyMCE Template plugin to just paste premade code snippets to edit, like this:

That said, I know it's not quite what you're looking for. Hopefully, someone on the dev team can provide better insight!

[michaelthwaite]

Smart Replacer wold do that, yes, pretty useful and thanks for the lead on the template chooser, that I'll use as I was hoping to find a way to hack TinyMCE and that looks like the clean way!