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

Wappler General Need Help
1

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?

2

Have you tried:

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

Hi @Teodor!

Yep, no luck - that didn’t present an error but simply didn’t work/do anything.
Many thing else I should try, please ?

4

So how do you run this function on the page? Probably you run it before the server action loads.

5

Right now - for testing I have a button that runs the flow on click. And I’m only clicking this after the page is fully loaded. I’m just applying text input values into the array - so they work pretty fast as they don’t rely on a SC. I’ve also checked console to ensure those values exist first

6

Why use flow for that? What if you directly add onclick="runMark()" to your button?
Also are you sure the array has values?

7

Simply because I didn't know any better! :pensive: Thank you for this, i'll remove the flow and just use the above onclick instead.

Re: the array, yep, 100%. I've checked the console to ensure that the values are being stored in the array.

8

Flows are only needed when you want to run several steps one after another.
For simple function calls you just need static evennts > onclick.

9

Got it, thank you. I’ll make sure I do this for simple triggering of JS scripts.

Confirming, this fires the JS well, thank you and works if I manually write the array within the JS script, but when I use the dynamic binding (I tried your example above, again) - nothing happens.

Any advice to get the array in the JS?

10

What do you see when you paste this in the browser console and hit enter?

dmx.parse('arr_mark.items')
11

I get an ‘undefined’ when I do that.

And checking again the array in the console, shows items exist fine:

Screen Shot 2021-03-08 at 6.06.03 pm

12

That means that most probably the “path” to your arr_mark in this function is wrong.
Is it nested somewhere maybe? Where is it located exactly when you check dmx.app.data in the console?

13

This is a nodeJS project, so I have a layout page, and a content page.

The array is on the content page, as is the script and onclick etc.

The arr_mark in the console is within the ‘view’ so it’s ‘view1.arr_mark’.

Can I do anything to resolve the path being incorrect?

14

Well then dmx.parse('arr_mark.items') should return the values.

15

Understood - so considering it’s not, what else would you recommend I do to debug/find a solution for this, please?

16

Sorry i meant

dmx.parse('view1.arr_mark.items')
1 Like
17

Working! Thank you so much for your help @Teodor

3 Likes