How can I manually add to a repeat?

Wappler General
1

I have a repeat

dmx-bind:repeat="sc_menus.data.q_menus.where(`menu_id`, 32, '==')"

which gives me a list to use in a radio group.

Let’s say it gives me a list of four results

2, 4, 6, 8

I want to add a zero to the beginning to give a fifth result (but only on this one occasion)

0

How can I do that client-side?
How can I add the zero to the beginning of the repeat so as to end up with this result?

0, 2, 4, 6, 8

Obviously not like this (that would be silly!)…

dmx-bind:repeat="'0' + sc_menus.data.q_menus.where(`menu_id`, 32, '==')"

The actual data per line is returned is like this, and it is 'list_label' that wants to be added as a '0'

label: "Tyre Depths"
list_code: null
list_label: "6"
list_price: null
list_ref: null
menu_id: 32
menu_list_id: 173
2

So what is the logic here? When should the 0 be added?

3

I want an extra radio button to appear with the value and label of, say, '0'

4

You say:

Which occasion exactly?

5

I have this Server Connect Query repeated throughout the site and I only want this ‘extra’ radio button to appear on one page.

6

Why not just add a static radio with a value of 0 in the radio group, outside of the repeat region?

7

@UKRiggers… I would turn the array into a string (with .values() I think?), then concatenate ‘0,’ at the front and then do a split(’,’).

8

I tried that before Teodor but the end result makes the layout look odd.

This is partly because the class
class="btn-group btn-group-toggle d-flex flex-wrap flex-grow-1"
is part of the repeat 'div' which this new extra radio button would be outside of.

image

Because this way of adding an extra radio button will be required on a number of different radio groups I didn’t want to start changing the way the button groups are structured, there are now hundreds of them and they work well.

Here is the code for this one radio group

<!-- N/S/R(i) -->
<div class="input-group col-sm-6" id="stat_nsri" is="dmx-radio-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-tire fa-lg" style="color: #ced4da;"></i><i class="fas fa-tire fa-fw fa-lg"></i>N/S/R(i)</div>
</div>
<div class="btn-group btn-group-toggle d-flex flex-wrap flex-grow-1" is="dmx-repeat" data-toggle="buttons" id="stat_nsri_grp" dmx-bind:repeat="sc_menus.data.q_menus.where(`menu_id`, 32, '==')">
<label class="btn btn-sm btn-outline-secondary" dmx-bind:for="input_{{menu_id}}_{{menu_list_id}}_nsri" dmx-class:active="menu_list_id == sc_ad_job_q.data.sa_q_job_q.stat_nsri" dmx-bind:id="stat_nsri_label_{{menu_id}}_{{menu_list_id}}">
<input class="custom-control-input" type="radio" dmx-bind:id="input_{{menu_id}}_{{menu_list_id}}_nsri" dmx-bind:value="menu_list_id" name="stat_nsri" dmx-bind:checked="menu_list_id == sc_ad_job_q.data.sa_q_job_q.stat_nsri" value="0">{{list_label}}</label>
</div>
</div>
9

Hi Antony, I did think of that but couldn’t get it to work.
Any further thoughts on that based on the code I have just added in reply to Teodor?

10

A weird hack you can try is:
Add the 0 radio inside the repeat as an extra radio button.
So now, when you run the page, all rows will have two radios: a 0 and whatever the actual row value is.

Then, just put a show/hide condition on the radio to show when your occasional condition is true AND $index == 0 (i.e. the first item).
So, then when you run it, first radio repeat will have two radios, a 0 guy and a regular one.
While all other will just show the regular one, since 0 guy is hidden.

11

Thanks for that @sid, I did get to the stage of adding the '0' inside the repeat and seeing two of everything, but I didn’t think to use that by hiding one set. I will try that now. I don’t think there will be any extra overhead by doing this. Thanks for the suggestion.

12

This @UKRiggers

If the button looks weird it is just because the styling is wrong and that’s fixable.

13

That works brilliantly, just what I wanted. I had to take care with the values, ID etc and bit of adjustment regarding the UPDATE query. All works as I want now and so I can use the same style/structure whenever I need this sort of thing. A ‘snippet’ feature now comes to mind! :smile:

1 Like
14

Thanks Jonas, and yes you are right about css, that wasn’t my main concern. I have used Sid’s suggestion above which suits my need and works well.

1 Like
15

I had to do something similar today so I though I would post a solution using a custom formatter.

Enter Array.unshift()

Say you have a variable with an object as value:

<dmx-value id="var1" dmx-bind:value="{'name':'new','icon':'fad fa-sparkles'}"></dmx-value>

And you have a SC that returns an array of objects.

<dmx-serverconnect id="serverconnect1" url="../api/getSomething" dmx-on:success="serverconnect1.data.query1.unshift(var1.value)"></dmx-serverconnect>

In my case I had to insert at the beginning of the SC query results an object.

So when the SC finishes it will call the custom formatter and add the object at the beginning of the array.

dmx.Formatter('array', 'unshift', function (array1, array2) {
  return array1.unshift(array2);
});

Now you can loop through serverconnect1.data.query1 with a repeat and your variable will be at serverconnect1.data.query1[0]

3 Likes