Display the data of Array Object in HTML Table

UpvoteUpvote 3 DownvoteDownvote

Features on these Courses

Attached Files

The following files have been attached to this tutorial:

.c3p

array-html-table.c3p

Download now 161.02 KB

Stats

143 visits, 159 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 26 Apr, 2025. Last updated 27 Apr, 2025

Display the data of Array Object in HTML Table.

{"is-c3-clipboard-data":true,"type":"events","items":[{"eventType":"block","conditions":[{"id":"on-completed","objectClass":"AJAX","parameters":{"tag":"\"results\""}}],"actions":[{"id":"load","objectClass":"Array","parameters":{"json":"AJAX.LastData"}}],"children":[{"eventType":"block","conditions":[{"id":"repeat","objectClass":"System","parameters":{"count":"Array.Width"}}],"actions":[{"id":"insert-content","objectClass":"HTMLElement","parameters":{"content-type":"html","string":"StringSub(\"<th>{0}</th>\", HTMLElement.EscapeHTML(trim(Array.At(loopindex))))","position":"end","selector":"\"thead tr\"","type":"one"}}]},{"eventType":"block","conditions":[{"id":"for","objectClass":"System","parameters":{"name":"\"Y\"","start-index":"0","end-index":"Array.Height-1"}}],"actions":[],"children":[{"eventType":"block","conditions":[{"id":"for","objectClass":"System","parameters":{"name":"\"X\"","start-index":"0","end-index":"Array.Width-1"}}],"actions":[{"id":"insert-content","objectClass":"HTMLElement","parameters":{"content-type":"html","string":"\"<tr></tr>\"","position":"end","selector":"\"tbody\"","type":"one"}},{"id":"insert-content","objectClass":"HTMLElement","parameters":{"content-type":"html","string":"StringSub(\"<td>{0}</td>\", HTMLElement.EscapeHTML(Array.At(loopindex, loopindex(\"Y\"))))","position":"end","selector":"StringSub(\"tbody tr:nth-of-type({0})\", loopindex(\"Y\"))","type":"one"}}]}]}]}]}

Example browser: HTML Table

Although the Example browser of the Construct editor provides an example of an HTML Table, this method need to fill in the table content - column in the eventsheet. If you plan to display dynamic data, it is not so convenient.

#open=html-table

Therefore I provide a more flexible example.

.C3P

array-html-table.c3p

Download now 161.02 KB
  • 0 Comments

Want to leave a comment? Login or Register an account!