DEV Community

sugaiketadao
sugaiketadao

Posted on • Edited on

Dynamic List Rendering - I built a lightweight Java framework for Japan's "SI" projects (third attempt in 10 years) #005

#javascript #framework #html #ajax

Introduction

In the previous article, I covered SIcore's "Mockup = Implementation" concept — how static HTML mockups become implementation code.

This time, I'll explain "Dynamic List Rendering" — how SIcore automatically expands array data from the server into table rows or list elements using templates.

What This Article Covers

  • What dynamic list rendering is
  • Automatic row generation using templates
  • Implementation steps and code examples
  • Benefits

What is Dynamic List Rendering?

In SIcore, array data [{}, {}] returned from the server is automatically expanded into row elements using HTML templates.

Traditional JSP requires loop constructs like <c:forEach>, but SIcore only requires defining a template row — the array data expands automatically.

Implementation Steps and Code Examples

Step 1: Define the Template Row

Define a template row inside the <tbody> tag using <script type="text/html">.

Static HTML (template row only):

<table>
  <tbody id="list">
    <script type="text/html">
      <tr>
        <td><input name="list.pet_nm"></td>
        <td><input name="list.weight_kg"></td>
      </tr>
    </script>
  </tbody>
</table>
Enter fullscreen mode Exit fullscreen mode

Key points:

  • Add id="list" to the <tbody> tag
  • Wrap the template row in <script type="text/html"> (planned migration to <template>)
  • Use the naming pattern list.field_name for the name attributes (where list matches the JSON key)

Step 2: Fetch Array Data from Server and Display

JavaScript:

// Generate request JSON from browser input
const req = PageUtil.getValues();
const res = await HttpUtil.callJsonService('/services/exmodule/ExampleListSearch', req);

// Response JSON
// {
//   "list": [
//     {"pet_nm": "Pochi", "weight_kg": "5.0"},
//     {"pet_nm": "Tama", "weight_kg": "2.5"}
//   ]
// }

// Auto-generate rows from response JSON
PageUtil.setValues(res);
Enter fullscreen mode Exit fullscreen mode

Result: Rows Added to HTML

Result HTML (template row + generated rows):

<table>
  <tbody id="list">
    <script type="text/html">
      <tr>
        <td><input name="list.pet_nm"></td>
        <td><input name="list.weight_kg"></td>
      </tr>
    </script>
    <tr>
      <td><input name="list.pet_nm" value="Pochi"></td>
      <td><input name="list.weight_kg" value="5.0"></td>
    </tr>
    <tr>
      <td><input name="list.pet_nm" value="Tama"></td>
      <td><input name="list.weight_kg" value="2.5"></td>
    </tr>
  </tbody>
</table>
Enter fullscreen mode Exit fullscreen mode

PageUtil.setValues(res) automatically expands the array data into table rows.

Explicit Row Addition

You can also explicitly add rows via JavaScript without receiving array data:

// Add a single row
PageUtil.addRow('list', {pet_nm: 'Pochi', weight_kg: '5.0'});

// Add multiple rows
PageUtil.addRow('list', [
  {pet_nm: 'Pochi', weight_kg: '5.0'},
  {pet_nm: 'Tama', weight_kg: '2.5'}
]);
Enter fullscreen mode Exit fullscreen mode

Benefits

1. No Loop Construct Needed

You don't need constructs like JSP's <c:forEach> or Thymeleaf's th:each. Just define a template row, and array data expands automatically.

2. Easy Transition from HTML Mockups

Simply wrap table rows created during the mockup phase in <script type="text/html"> to turn them into implementation code.

3. Server Just Returns JSON

The server (Java) doesn't need to worry about loop processing — just return array data as JSON.

// Java code
public void doExecute(Io io) {
  // Database query
  final IoRows rows = SqlUtil.selectBulk(getDbConn(), SQL_SEL_PET);
  // Set result rows
  io.putRows("list", rows);
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

SIcore's dynamic list rendering feature makes displaying array data simple and concise.

Next time, I'll introduce SIcore's custom HTML attributes.

Related Articles

Check out the other articles in this series!

SIcore Framework Links

All implementation code and documentation are available here:

Thank you for reading!
💖 If you found this helpful, I'd appreciate a like!

Top comments (0)