HI guys,
I am having trouble with the data that I am getting back from a API call. I wish to place the data into a a ‘repeat’ accordion card - within a table - using the BS5 table generator in the vertical format.
- However none of the data appears aside from the table header labels, when in the vertical position. If i simply change in the BS5 generator to a horizontal table - all the data is there but as one large data ‘block’.
- So the other issue I have is that I can’t separate this data block into in its constituent parts (style code ID ) on separate ‘repeat’ cards. Each data block is separated by its own ‘ID’ numerical code in the API:
- the table is for a mobile first - so one reason for the data table to be in vertical format.
“data”: / “inspections”: / “id”: 24282,
- I have attached an image of the API schema to show how the data is separated and repeating.
- Below are the code blocks for the vertical v horizontal tables.
Thanks
Images for reference:
- vertical table with no data
- horizontal table with data
- the API schema - showing how the data blocks should appear as repeats.
This is the code for the vertical format where the data does not appear:
<div class="container mt-3" id="Tab_Test_repeats">
<div class="row">
<div class="col" dmx-repeat:repeat_col="2">
<div class="accordion" id="accordion2">
<div class="card border-0 order-sm-1 align-self-stretch flex-grow-1">
<div class="card-header mt-2 mb-4 bg-info style45" id="accordion2_headingOne">
<h5 class="mb-0">
<button id="accordion2_collapseOne_Btn" class="btn w-100 text-start style119 active" type="submit" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseOne" data-bs-target="#accordion2_collapseOne">
<table class="table table-sm table-borderless">
<tbody dmx-generator="bs5table" dmx-populate="api_GET_SD_Inspect_list_FULL.data.data.inspections">
<tr>
<th>Style code</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections[0].style_code"></td>
</tr>
</tbody>
</table>
</button>
</h5>
</div>
<div id="accordion2_collapseOne" class="collapse" is="dmx-bs5-collapse" show="true" aria-labelledby="accordion2_headingOne" data-bs-parent="#accordion2" data-parent="#accordion2">
<table class="table table-striped">
<tbody dmx-generator="bs5table" dmx-populate="api_GET_SD_Inspect_list_FULL.data.data.inspections">
<tr>
<th>Id</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.id"></td>
</tr>
<tr>
<th>Input reference</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.input_reference"></td>
</tr>
<tr>
<th>Inspection number</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.inspection_number"></td>
</tr>
<tr>
<th>Handover date</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.handover_date"></td>
</tr>
<tr>
<th>Supplier</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.supplier_id"></td>
</tr>
<tr>
<th>Supplier name</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.supplier_name"></td>
</tr>
<tr>
<th>Supplier rating</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.supplier_rating"></td>
</tr>
<tr>
<th>Factory</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.factory_id"></td>
</tr>
<tr>
<th>Udc</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.UDC_id"></td>
</tr>
<tr>
<th>Client pos</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.client_pos"></td>
</tr>
<tr>
<th>Style code</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.style_code"></td>
</tr>
<tr>
<th>Style name</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.style_name"></td>
</tr>
<tr>
<th>Colours</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.colours"></td>
</tr>
<tr>
<th>Season code</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.season_code"></td>
</tr>
<tr>
<th>Style division</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.style_division"></td>
</tr>
<tr>
<th>Style wholesale class</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.style_wholesale_class"></td>
</tr>
<tr>
<th>Style subclass</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.style_subclass"></td>
</tr>
<tr>
<th>Select for compliance</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.select_for_compliance"></td>
</tr>
<tr>
<th>Select for aql</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.select_for_AQL"></td>
</tr>
<tr>
<th>Inspection date</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.inspection_date"></td>
</tr>
<tr>
<th>Order quantity</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.order_quantity"></td>
</tr>
<tr>
<th>Status</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.status"></td>
</tr>
<tr>
<th>Updated on</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.updated_on"></td>
</tr>
<tr>
<th>Arrived consol</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.arrived_consol"></td>
</tr>
<tr>
<th>Arrived consol date</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.arrived_consol_date"></td>
</tr>
<tr>
<th>Qc check</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.QC_check"></td>
</tr>
<tr>
<th>Compliance check</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.compliance_check"></td>
</tr>
<tr>
<th>Qc check status</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.QC_check_status"></td>
</tr>
<tr>
<th>Compliance check status</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.compliance_check_status"></td>
</tr>
<tr>
<th>Supplier code</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.supplier_code"></td>
</tr>
<tr>
<th>Delivery name</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections.delivery_name"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
**This is the code for the horizontal table where the data appears fully but does not repeat with its own ‘ID’ numerical code:
<div class="container mt-3" id="Tab_Test_repeats">
<div class="row">
<div class="col" dmx-repeat:repeat_col="2">
<div class="accordion" id="accordion2">
<div class="card border-0 order-sm-1 align-self-stretch flex-grow-1">
<div class="card-header mt-2 mb-4 bg-info style45" id="accordion2_headingOne">
<h5 class="mb-0">
<button id="accordion2_collapseOne_Btn" class="btn w-100 text-start style119 active" type="submit" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseOne" data-bs-target="#accordion2_collapseOne">
<table class="table table-sm table-borderless">
<tbody dmx-generator="bs5table" dmx-populate="api_GET_SD_Inspect_list_FULL.data.data.inspections">
<tr>
<th>Style code</th>
<td dmx-text="api_GET_SD_Inspect_list_FULL.data.data.inspections[0].style_code"></td>
</tr>
</tbody>
</table>
</button>
</h5>
</div>
<div id="accordion2_collapseOne" class="collapse" is="dmx-bs5-collapse" show="true" aria-labelledby="accordion2_headingOne" data-bs-parent="#accordion2" data-parent="#accordion2">
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Input reference</th>
<th>Inspection number</th>
<th>Handover date</th>
<th>Supplier</th>
<th>Supplier name</th>
<th>Supplier rating</th>
<th>Factory</th>
<th>Udc</th>
<th>Client pos</th>
<th>Style code</th>
<th>Style name</th>
<th>Colours</th>
<th>Season code</th>
<th>Style division</th>
<th>Style wholesale class</th>
<th>Style subclass</th>
<th>Select for compliance</th>
<th>Select for aql</th>
<th>Inspection date</th>
<th>Order quantity</th>
<th>Status</th>
<th>Updated on</th>
<th>Arrived consol</th>
<th>Arrived consol date</th>
<th>Qc check</th>
<th>Compliance check</th>
<th>Qc check status</th>
<th>Compliance check status</th>
<th>Supplier code</th>
<th>Delivery name</th>
</tr>
</thead>
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="api_GET_SD_Inspect_list_FULL.data.data.inspections" id="tableRepeat1">
<tr>
<td dmx-text="id"></td>
<td dmx-text="input_reference"></td>
<td dmx-text="inspection_number"></td>
<td dmx-text="handover_date"></td>
<td dmx-text="supplier_id"></td>
<td dmx-text="supplier_name"></td>
<td dmx-text="supplier_rating"></td>
<td dmx-text="factory_id"></td>
<td dmx-text="UDC_id"></td>
<td dmx-text="client_pos"></td>
<td dmx-text="style_code"></td>
<td dmx-text="style_name"></td>
<td dmx-text="colours"></td>
<td dmx-text="season_code"></td>
<td dmx-text="style_division"></td>
<td dmx-text="style_wholesale_class"></td>
<td dmx-text="style_subclass"></td>
<td dmx-text="select_for_compliance"></td>
<td dmx-text="select_for_AQL"></td>
<td dmx-text="inspection_date"></td>
<td dmx-text="order_quantity"></td>
<td dmx-text="status"></td>
<td dmx-text="updated_on"></td>
<td dmx-text="arrived_consol"></td>
<td dmx-text="arrived_consol_date"></td>
<td dmx-text="QC_check"></td>
<td dmx-text="compliance_check"></td>
<td dmx-text="QC_check_status"></td>
<td dmx-text="compliance_check_status"></td>
<td dmx-text="supplier_code"></td>
<td dmx-text="delivery_name"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks