How to execute javascript for each item in a repeat?

#1

I have a repeat on the page that’s showing different links, think of it as a menu.

For example the repeat is looping through an object with 3 items in it.
It’s displaying a name it got from the database, so example output:

<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>

Now for each item I want to execute javascript code that I wrote which checks some things in the database and as a result will output ‘true’ or ‘false’.

When it’s true, I want to apply a class with the dynamic attribute setting, so for example it’ll be:

<p class="true">Item 1</p>
<p class="false">Item 2</p>
<p class="false">Item 3</p>

The real solution is more complex

How can I execute this javascript function for each item in the repeat? I tried to simply put a in a repeat children. But that just executed it once.

#2

Could you use a dmx-class linked to a custom formatter that returns the true/false you want?

#3

It’s unclear what you are trying to achieve but it looks like you are trying to set a class value based on a database value?

Have you tried the dynamic attribute for class toggle?

Screen Shot 2021-09-24 at 9.08.39 AM
Screen Shot 2021-09-24 at 9.08.39 AM818×494 21.4 KB

#4

Thanks for the help.

@bpj can you explain what you mean with ‘custom formatter’?

This is a part of the javascript code, this function needs to be run for every item in the repeat:

     function set_lecture_classes() {
        // put wappler values into javascript variables
        console.log("START set_lecture_classes()");
        let count_lectures_per_chapter =  dmx.parse('content.get_lecture_style.data.repeat[0].count_lectures_per_chapter');
        console.log("count_lectures_per_chapter =" + count_lectures_per_chapter);
        let lecture_watch_status = dmx.parse('content.get_lecture_style.data.repeat[0].get_lectures_per_chapter[0].lecture_watch_status');
        console.log("lecture_watch_status =" + lecture_watch_status);
        let total_lectures = dmx.parse('content.get_my_courses.data.query_all_courses_plus_owned[0].lecture_count');
        console.log("total_lectures= "+ total_lectures);
        let lecture_index = dmx.parse('$index');
        console.log("index =" +lecture_index);

        switch (count_lectures_per_chapter){
            case 'single':
                console.log('Case is SINGLE'); // line = false //
                switch (lecture_watch_status){
                    case 'null':
                        console.log('lecture watch status is NULL');
                        switch (lecture_index){
                            case 1:
                            console.log('lecture index status is FIRST');
                            dmx.global.set('fadeImage', true);
                            break;
                            default:
                            console.log('lecture index status is MIDDLE');
                            break;
                            case total_lectures:
                            console.log('lecture index status is LAST');
                            break;
                        }
                        break;
                    case 'doing':
                        console.log('lecture watch status is DOING');
                        
                        switch (lecture_index){
                            case 1:
                            console.log('lecture index status is FIRST');
                            dmx.global.set('pinkCircle', true);
                            dmx.global.set('pinkLine', true);
                            dmx.global.set('pinkBorder', true);
                            break;
                            default:
                            console.log('lecture index status is MIDDLE');
                            break;
                            case total_lectures:
                            console.log('lecture index status is LAST');
                            
                            break;
                        }
                        break;

This code sets variables to a a true or false state. And then I apply classes using Dynamic attribute → class toggle:

 <div id="repeatLectures" is="dmx-repeat" dmx-bind:repeat="get_lectures_per_chapter">
                                            <div class="accordion-body">

                                                <div class="lesson">
                                                    <div class="lectureWrap">
                                                        <div class="" dmx-class:linebefore="lineBefore" dmx-class:lineafter="lineAfter" dmx-class:pinkline="pinkLine">
                                                            <div class="lectureNumber" dmx-class:graycircle="grayCircle" dmx-class:pinkcircle="pinkCircle">{{($index + 1)}}</div>
                                                        </div>

This works. Except that I don’t know how to run the JS for each repeat within the “repeatLectures” div.

Any tips?

#5

formatters are essentially Javascript functions that run on values to convert them (such as formatDate(), .sort(), .trim() etc.). You can create your own with the function you have written.


Then you could apply a .setlc() formatter, using your code, to the values which would return the true/false/other value you have coming back from the formatter.

The only consideration is if it matters that it keeps evaluating over and over. Formatters run over and over to apply the format to any updated value. @mebeingken and @patrick were looking at limiting execution if you just wanted to run it when the value was updated:

#6

@bpj Thanks Ben, hadn’t considered custom formatters for this use case…
I’ll see if I can make it work with them. Thanks!

1 Like