Using async helper functions with #each in jsreport Handlebars

manuel-iot

Hello,

I'm trying to use an async helper function inside a Handlebars #each block within a jsreport component. Here’s my test case:

{{#each (getSyncItems)}}
    <p>{{this}}</p>
{{/each}}

{{#each (getAsyncItems)}}
  <h2>{{this}}</h2>
{{/each}}

function getSyncItems() {
    console.log("getSyncItems");
    return ["sync1","sync2"];
}

async function getAsyncItems() {
    console.log("getAsyncItems");
    return ["async1","async2"];
}

The synchronous function (getSyncItems) works as expected, but the asynchronous function (getAsyncItems) does not render any output when used inside #each.

Since I plan to use JSONata to query data in my actual implementation, I need to call jsonata.evaluate(), which is asynchronous.

Question:
Is there a way to use async helper functions inside #each in jsreport Handlebars? If not, what would be the best approach to handle this scenario?

Thanks!
br Manuel

admin

This should work
https://playground.jsreport.net/w/anon/6OBgbZhK

async function getAsyncItems() {
    console.log("getAsyncItems");
    return ["async1","async2"];
}

const jsreport = require('jsreport-proxy')
async function asyncEach(data, opts) {
    let r = ''
    let realData = await jsreport.templatingEngines.waitForAsyncHelper(data)
    for (let item of realData) {
        r += opts.fn(item)
    }

    return r
}


{{#asyncEach (getAsyncItems)}}
  <h2>{{this}}</h2>
{{/asyncEach}}

manuel-iot

Thats working fine!
Thank you!