What is the correct syntax to apply array data from AC into a JS snippet dynamically? (cool little text highlighter)

Hi all,

I’ve been able to get https://markjs.io/ working well when I write the keywords in during testing, but when trying to apply dynamically an array of text (from the search fields) I keep getting either an JS error in the console, or nothing happens at all.

It’s pretty clear I just don’t have the right syntax for applying the array data from AC into the JS Snippet.

Would any JS experts mind taking a look at the code to see what I’m doing wrong here.

Working JS:

<script>
    function runMark() {
    var instance = new Mark(document.querySelector(".context"));
instance.mark(["engineer", "developer"], {
"className": "context"
});
}
</script>

What I’ve tried with Wappler dynamic data binding (That is failing):

<script>
    function runMark() {
    var instance = new Mark(document.querySelector(".context"));
instance.mark({{arr_mark.items}}, {
"className": "context"
});
}
</script>

and

<script>
    function runMark() {
    var instance = new Mark(document.querySelector(".context"));
instance.mark('arr_mark.items', {
"className": "context"
});
}
</script>

I’ve confirmed that arr_mark.items is indeed a working array in the console.

Any help appreciated!

UPDATE:
I’ve scoured the forum, and tried probably another 4/5 attempts - and Stackoverflow isn’t really helping this novice JS guy, it seems a little more complex than I anticipated.

This is the way that mark.js describes an array working:

var instance = new Mark(document.querySelector(".context"));
instance.mark(["Lorem", "ipsum"], {
    "className": "context"
});

What I want to do is replace [“Lorem”, “ipsum”] with the array ‘arr_mark.items’.

@patrick I hope you don’t mind me tagging you, any suggestions here to do this within Wappler?