How to repeat data in JSON?

kfawcett · February 8, 2022, 6:13pm

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

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?

kfawcett · February 8, 2022, 6:20pm

I want to see it output the two names under the Body parent object.

Example:

slender
sturdy

Teodor · February 8, 2022, 6:21pm

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?

kfawcett · February 8, 2022, 6:30pm

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

            <!-- 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:

Slender
Sturdy

Gender:

Female
Male

I haven’t done repeats in Wappler yet, so Teodor can assist further

kfawcett · February 8, 2022, 7:18pm

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

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.

kfawcett · February 8, 2022, 7:36pm

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>

sitestreet · October 6, 2022, 10:52am

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

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

sitestreet · October 10, 2022, 10:22am

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:

Screen Recording 2022-10-10 at 11.19.58

I’m sure I’m doing something fundamentally wrong but cannot see what it is!

Apple · October 10, 2022, 5:09pm

Can you show me a screenshot of the window where this happens? Honestly, this sounds like a Wappler UI bug

sitestreet · October 11, 2022, 8:54am

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

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

@sitestreet
Where does your data come from? Is it from a database query, or an array component or any other data source?

sitestreet · October 12, 2022, 8:06am

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

Coming from:

Server connect data
App Connect Variable
App Connect Array (?)
App Connect Datastore
Other

That’s what Teodor wants to know

sitestreet · October 12, 2022, 8:26am

Aah, sorry. Server Connect data.

Teodor · October 12, 2022, 8:32am

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>