Repeating 'GET' - APi call return visual table data

UDX · August 17, 2022, 4:13am

I am unclear on how to make a table set of data - that has repeating headers. but differing ‘cell’ outcomes?
the api returns the following example below - but I am not clear what settings I need to implement to repeat the tables - with their changing data.

I have the following set up:

API date source - to ‘get’ the data. It works for one set BUT not the repeating data in a table.
I have tried: ‘form repeat, table generator, table cell properties’ - none seem to work /missing some settings
Table set up as attachment -

Thanks

Steff

See below:

{
“defect_code”: “A1”,
“defect_type”: “A”,
“defect_index”: 1,
“defect_code_desc_ENG”: “01: Holes”,
“defect_type_desc_ENG”: “A: Fabric”
},

I get the data for the above data set in the table, but I do not get the repeat data below appearing.
{
“defect_code”: “A10”,
“defect_type”: “A”,
“defect_index”: 10,
“defect_code_desc_ENG”: “10: Other”,
“defect_type_desc_ENG”: “A: Fabric”
},
{
“defect_code”: “A2”,
“defect_type”: “A”,
“defect_index”: 2,
“defect_code_desc_ENG”: “02: Fabric faults e.g. pulls, snags or slubs”,
“defect_type_desc_ENG”: “A: Fabric”
},
{
“defect_code”: “A3”,
“defect_type”: “A”,
“defect_index”: 3,
“defect_code_desc_ENG”: “03: Shading between panels”,
“defect_type_desc_ENG”: “A: Fabric”
},
---- etc -----

Apple · August 17, 2022, 4:31am

It’s better if you show the HTML code of the repeat/table section

ben · August 17, 2022, 4:50am

Also the form repeat properties

UDX · August 17, 2022, 5:16am

ok thanks both.

Just updating and I’ll post shortly as I tried another method.

UDX · August 17, 2022, 5:31am

For the App Structure:

<div class="container" id="Table_AQL_defect_codes">
        <div class="row">
            <div class="col">
                <div is="dmx-form-repeat" id="formRepeat_AQLdefectscodes" dmx-bind:items="api_GET_AQL_report_OK.data.data.defectCodes" min="1" max="10">
                    <div class="row">
                        <div class="col">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <tbody dmx-generator="bs5table" dmx-populate="api_GET_AQL_report_OK.data">
                                        <tr>
                                            <th>Status code</th>
                                            <td dmx-text="api_GET_AQL_report_OK.data.statusCode">{{api_GET_AQL_report_OK.data.statusCode}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <tbody dmx-generator="bs5table" dmx-populate="api_GET_AQL_report_OK.data.data.defectCodes">
                                        <tr>
                                            <th>Defect code</th>
                                            <td dmx-text="api_GET_AQL_report_OK.data.data.defectCodes[0].defect_code"></td>
                                        </tr>
                                        <tr>
                                            <th>Defect type</th>
                                            <td dmx-text="api_GET_AQL_report_OK.data.data.defectCodes[0].defect_type"></td>
                                        </tr>
                                        <tr>
                                            <th>Defect index</th>
                                            <td dmx-text="api_GET_AQL_report_OK.data.data.defectCodes[0].defect_index"></td>
                                        </tr>
                                        <tr>
                                            <th>Defect code desc eng</th>
                                            <td dmx-text="api_GET_AQL_report_OK.data.data.defectCodes[0].defect_code_desc_ENG"></td>
                                        </tr>
                                        <tr>
                                            <th>Defect type desc eng</th>
                                            <td dmx-text="api_GET_AQL_report_OK.data.data.defectCodes[0].defect_type_desc_ENG"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table">
                        <tbody dmx-generator="bs5table" dmx-populate="api_GET_AQL_report_OK.data.data.defectCodes, api_GET_AQL_report_OK.data.data.defectCodes, api_GET_AQL_report_OK.data.data.defectCodes">
                            <tr>
                                <th>Defect code</th>
                                <td dmx-text="api_GET_AQL_report_OK.data.data.defectCodes, api_GET_AQL_report_OK.data.data.defectCodes, api_GET_AQL_report_OK.data.data.defectCodes[0].defect_code"></td>
                            </tr>
                            <tr>
                                <th>Defect type</th>
                                <td dmx-text="api_GET_AQL_report_OK.data.data.defectCodes, api_GET_AQL_report_OK.data.data.defectCodes, api_GET_AQL_report_OK.data.data.defectCodes[0].defect_type"></td>
                            </tr>
                            <tr>
                                <th>Defect index</th>
                                <td dmx-text="api_GET_AQL_report_OK.data.data.defectCodes, api_GET_AQL_report_OK.data.data.defectCodes, api_GET_AQL_report_OK.data.data.defectCodes[0].defect_index"></td>
                            </tr>
                            <tr>
                                <th>Defect code desc eng</th>
                                <td dmx-text="api_GET_AQL_report_OK.data.data.defectCodes, api_GET_AQL_report_OK.data.data.defectCodes, api_GET_AQL_report_OK.data.data.defectCodes[0].defect_code_desc_ENG"></td>
                            </tr>
                            <tr>
                                <th>Defect type desc eng</th>
                                <td dmx-text="api_GET_AQL_report_OK.data.data.defectCodes, api_GET_AQL_report_OK.data.data.defectCodes, api_GET_AQL_report_OK.data.data.defectCodes[0].defect_type_desc_ENG"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

UDX · August 17, 2022, 5:34am

Form repeat - data binding:

Teodor · August 17, 2022, 6:25am

Something is not quite right on your page.
If you want to display your data in a table - just use the table generator, select the data source and generate the table. Form repeat is a totally different component used for totally different purposes - generating a dynamic insert/update record forms.

UDX · August 17, 2022, 6:35am

Ok thanks

But I am still unsure how set up in Wappler the GET data that has several table repeats. So far I can receive the first table set of data from the API only.

Teodor · August 17, 2022, 6:36am

Can you explain this a bit more please, what do you mean by several table repeats? Maybe show some example?

UDX · August 17, 2022, 6:37am

Is it easier to see the API response (JSON)?

Teodor · August 17, 2022, 6:39am

It’s fine, but please also explain what do you want to do with it on the page and how do you need to display the data exactly.

UDX · August 17, 2022, 8:29am

I want the data to be shown in repeat tables as per the screenshot
the data will be a live update from the Api

{
    "statusCode": 200,
    "msg": "",
    "status": true,
    "type": "Default",
    "data": {
        "defectCodes": [
            {
                "defect_code": "A1",
                "defect_type": "A",
                "defect_index": 1,
                "defect_code_desc_ENG": "01: Holes",
                "defect_type_desc_ENG": "A: Fabric"
            },
            {
                "defect_code": "A10",
                "defect_type": "A",
                "defect_index": 10,
                "defect_code_desc_ENG": "10: Other",
                "defect_type_desc_ENG": "A: Fabric"
            },
            {
                "defect_code": "A2",
                "defect_type": "A",
                "defect_index": 2,
                "defect_code_desc_ENG": "02: Fabric faults e.g. pulls, snags or slubs",
                "defect_type_desc_ENG": "A: Fabric"
            }

Teodor · August 17, 2022, 10:36am

Ok i see what you mean. With this data source and its structure it won’t just work out of the box / automatically with the table generator. You need to adjust the code a bit:

    <section>
        <div class="container">
            <div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="api_GET_AQL_report_OK.data.data.defectCodes">
                <div class="col-12">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Status Code</th>
                                <th scope="col">{{api_GET_AQL_report_OK.data.statusCode}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>Defect code</th>
                                <td dmx-text="defect_code"></td>
                            </tr>
                            <tr>
                                <th>Defect type</th>
                                <td dmx-text="defect_type"></td>
                            </tr>
                            <tr>
                                <th>Defect index</th>
                                <td dmx-text="defect_index"></td>
                            </tr>
                            <tr>
                                <th>Defect code desc eng</th>
                                <td dmx-text="defect_code_desc_ENG"></td>
                            </tr>
                            <tr>
                                <th>Defect type desc eng</th>
                                <td dmx-text="defect_type_desc_ENG"></td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </section>

This produces:

UDX · August 17, 2022, 10:56am

Thanks a lot @Teodor, much appreciated . That worked fine.

Can I ask what did you change in the code?!

Teodor · August 17, 2022, 10:58am

The expressions in the table repeat and the expressions in the table cells.

UDX · August 17, 2022, 10:58am

UDX · August 18, 2022, 6:53am

Hi Teodor,

Following your solution yesterday I tried something for some other ‘repeat’ items in a dropdown. I think this time I am placing elements of the code in the wrong place. I do get repeats - not from the API but of the menu item!

I will create another New topic - as this one is ‘closed’.
Once apoproved by moderator - i’ll post the link here.
Thanks

Thanks