🐛 Issue with Table Data Not Rendering Inside Loop (Alpha Studio)

Community
1

Hi everyone,

I am currently facing an issue in Alpha Studio related to rendering table type data inside a loop.

:puzzle_piece: Description:

When iterating through a JSON structure to render fields dynamically, everything works fine for most field types like "input" and "date". Even for "table" types, the table UI renders properly, but the data inside the table is not being displayed but i had mapped correctly.

It seems that when the component hits a type: "table" inside the loop, it recognizes it correctly and displays the table layout — but it doesn’t render the rows from the value array.

:test_tube: Example JSON Snippet:

{
  "key": "diagnosis",
  "value": [
    {
      "primary": false,
      "diagnosis": "Ischialgia",
      "icd_code": ["M54.3"],
      "description": "Pain radiating along the sciatic nerve..."
    },
    {
      "primary": true,
      "diagnosis": "Vertigo",
      "icd_code": ["R42"],
      "description": "A sensation of spinning dizziness..."
    }
  ],
  "type": "table",
  "error": ""
}

:white_check_mark: What’s working:

  • Table type is detected correctly .
  • The table component appears.

:cross_mark: What’s not working:

  • The data rows inside the value array are not rendering.
  • No error shown; it just silently fails to display the content.

:brain: Suspected Cause:

It might be a rendering issue where the loop isn’t correctly accessing or mapping over the nested value array when type is "table".

:folded_hands: Request:

Has anyone faced this before or found a fix or workaround? Any insight into how the table rows can be correctly rendered inside a loop would be appreciated.

Thanks!

@Eldho

6 Likes
2

@Shamnad_KS @Sam @Simphiwe @Irfan_Ali

3

Hey! I faced a similar issue before, and this workaround helped me

let index_j = params.context?.j; // Get the inner loop index
let index_i = params.context?.i; // Get the outer loop index

let tableId = `table_id-i${index_i}-j${index_j}`; // Construct the dynamic table ID
let table = ap.$(tableId); // Access the table component

let table_value = [{ value: "value" }]; // Example of data you want to set in the table

setTimeout(() => {
    table.value = table_value ; // Replace with your actual data source
}, 100);

Put this code in table onLoad and check if this workaround works for your case too!

6 Likes
4

Thanks !!! That worked perfectly the table rows are now rendering correctly inside the loop. Appreciate the help! :raising_hands:
@Ziyad

7 Likes