I feel like I’m close but the data is not repeating.
This is the data stored in a JSON field within the database.
{
"Body": [{
"name": "slender",
"amount": 7496,
"parentName": "Body"
}, {
"name": "sturdy",
"amount": 2500,
"parentName": "Body"
}
],
"Gender": [{
"name": "female",
"amount": 4999,
"parentName": "Gender"
}, {
"name": "male",
"amount": 4997,
"parentName": "Gender"
}
]
}
This structure returns the first name value, but not the second name value. Any ideas why?
<div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="getCollection.data" key="id">
<ul dmx-text="checkboxes.Body[0].name">
<li dmx-text=""></li>
</ul>
</div>
Teodor
February 8, 2022, 6:18pm
2
Which part are you trying to repeat exactly?
You applied a repeater on the row, but then you have some UL with innter text applied, pointing to the first element? What are you trying to achieve here?
I want to see it output the two names under the Body parent object.
Example:
Teodor
February 8, 2022, 6:21pm
4
But if you want to repeat the <li>
you need to apply the repeat children to the <ul>
and pick the correct expression in the <li>
.
Also what is your entire data returned exactly? It seems to me you have some nested arrays there, so you are picking some wrong expressions?
This is the entire data
{
"Body": [{
"name": "slender",
"amount": 7496,
"parentName": "Body"
}, {
"name": "sturdy",
"amount": 2500,
"parentName": "Body"
}
],
"Gender": [{
"name": "female",
"amount": 4999,
"parentName": "Gender"
}, {
"name": "male",
"amount": 4997,
"parentName": "Gender"
}
]
}
The end goal is to have a structure like this:
<h1>Body</h1>
<div is="dmx-checkbox-group" id="group1" class="checkbox-group">
<input id="checkbox1" type="checkbox" name="Slender"><span>7496</span>
<input id="checkbox2" type="checkbox" name="Sturdy"><span>2500</span>
</div>
<h1>Gender</h1>
<div is="dmx-checkbox-group" id="group1" class="checkbox-group">
<input id="checkbox1" type="checkbox" name="Female"><span>4999</span>
<input id="checkbox2" type="checkbox" name="Male"><span>4997</span>
</div>
So it looks something like this:
Apple
February 8, 2022, 6:45pm
6
<!-- repeat1: outer repeat: Body, Gender -->
<div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="getCollection.data" key="id">
<!-- repeat2: inner repeat: Slender, Sturdy -->
<!-- build this repeat through Wappler's UI -->
</div>
Scroll down near the end, skip the entire first half and a bit more of the tutorial:
First, you repeat the outer layer (which contains Body, Gender)
For each outer layer, you repeat again (Slender, Sturdy)
Body:
Gender:
I haven’t done repeats in Wappler yet, so Teodor can assist further
The challenge is with the JSON. If this was individual records in the database then I think the repeats would work, but since I have one record and trying to repeat the data within a JSON field from that record it’s not working correctly. At least that’s my current thought until @Teodor tells me I’m wrong and how to do it.
JonL
February 8, 2022, 7:22pm
8
This should get you going:
<div dmx-repeat:repeat1="getCollection.data">
<h1>{{$key}}</h1>
<div dmx-repeat:repeat2="$value" is="dmx-checkbox-group" id="group1" class="checkbox-group">
<input id="checkbox1" type="checkbox" name="Slender"><span>{{name}} {{amount}}</span>
</div>
</div>
Will result in:
Make sure your checkboxes attributes are dynamic and all that as I didn’t add that to the code.
1 Like
Thanks @JonL and @Apple . I had to change the repeat, but it worked!!!
<div dmx-repeat:repeat1="getCollection.data.query.checkboxes">
<h1>{{$key}}</h1>
<div dmx-repeat:repeat2="$value" is="dmx-checkbox-group" id="group1" class="checkbox-group">
<input id="checkbox1" type="checkbox" name="Slender"><span>{{name}} </span>
</div>
</div>
2 Likes
I’m struggling a little bit with this so am hoping you can help.
I have a json field which holds data like this:
["Below Average","Average","Above Average","Excellent"]
I am trying to show checkboxes in my form with values and labels pulled from this field.
TIA.
Apple
October 8, 2022, 12:44am
11
Are you able to iterate such array and print the labels (which technically are the values)? The variable is probably $value
The only thing else you can get is the $index, ranging from 0 to 3 (included) in your example
Thanks @Apple for getting back to me. I can get the array values in a comma-separated form but can’t seem to get them my repeat loop.
I’ve set the expression in my repeat to be the field containing the json but when I try to do anything in the repeat, I see this in the bindings:
I’m sure I’m doing something fundamentally wrong but cannot see what it is!
Apple
October 10, 2022, 5:09pm
13
Can you show me a screenshot of the window where this happens? Honestly, this sounds like a Wappler UI bug
There does seem to be something iffy with the UI. I’ve now got it to return three rows (probably shouldn’t call them rows but you know what I mean) but I can only then access the index or key (0,1,2,etc.) and not the actual values (Below Average,Average,Above Average,etc.)
The code for the repeat is this:
<div dmx-repeat:repeat1="questionOptions.values()">
Value: {{$value}} Key: {{$key}} Index: {{$index}}
</div>
I’ve just put a line in to output the various values for testing and I get this:
Value: Key: 0 Index: 0
Value: Key: 1 Index: 1
Value: Key: 2 Index: 2
Is this helpful in showing where I must be going wrong?
Apple
October 12, 2022, 6:17am
15
That .values()
is looking a bit odd to me, can you maybe replace it with .value
?
P.S.: I’m not well versed in the front-end
Teodor
October 12, 2022, 7:46am
16
@sitestreet
Where does your data come from? Is it from a database query, or an array component or any other data source?
sitestreet:
I have a json field which holds data like this:
["Below Average","Average","Above Average","Excellent"]
I’m storing various values in a json field and want to then use those to display checkboxes in my form.
Apple
October 12, 2022, 8:21am
18
sitestreet:
json field
Coming from:
Server connect data
App Connect Variable
App Connect Array (?)
App Connect Datastore
Other
That’s what Teodor wants to know
1 Like
Aah, sorry. Server Connect data.
1 Like
Teodor
October 12, 2022, 8:32am
20
You can do this like:
<div dmx-repeat:repeat1="questionOptions.parseJSON()">
Value: {{$value}}
</div>
or with repeat children:
<div id="repeat1" is="dmx-repeat" dmx-bind:repeat="json_test.parseJSON()">
<p>Value: {{$value}}</p>
</div>