Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTMX with Handlebars Client side template does not work with JSON Arrays #3197

Open
tuaris opened this issue Feb 19, 2025 · 1 comment
Open

Comments

@tuaris
Copy link

tuaris commented Feb 19, 2025

I've tried this with HTMX 2.x and 1.x and the current version of Handlebars.

I have the follow data in this format:

{
  "items": [
    {
      "key1": "value1",
      "key2": "value2",
      "key3": {
        "subkey1": "value3",
        "subkey2": "value4"
      },
      "key4": "value4",
      "key5": "value5"
    },
    {
      "key1": "value1",
      "key2": "value2",
      "key3": {
        "subkey1": "value3",
        "subkey2": "value4"
      },
      "key4": "value4",
      "key5": "value5"
    },
    {
      "key1": "value1",
      "key2": "value2",
      "key3": {
        "subkey1": "value3",
        "subkey2": "value4"
      },
      "key4": "value4",
    },
    {
      "key1": "value1",
      "key2": "value2",
      "key3": {
        "subkey1": "value3",
        "subkey2": "value4"
      },
      "key4": "value4",
      "key5": "value5"
    }
  ]
}

The following HTMX does not print out a table with 4 rows. Instead it's a table with only one empty row:

		<div hx-ext="client-side-templates">
			<div hx-get="/path/to/data" 
				 hx-swap="innerHTML"
				 hx-target="#data_table"
				 hx-trigger="load, click, every 600s"
				 handlebars-array-template="data_template">
				<button class="btn btn-primary">Refresh Data</button>
			</div>
			
			<template id="data_template">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Address</th>
							<th>Client Hostname</th>
							<th>Hardware Type</th>
							<th>MAC Address</th>
						</tr>
					</thead>
					<tbody>
					
					{{#each items}}
					<tr>
						<td>{{key1}} </td>
                                                <td>{{key2}} </td>
                                                ...
					</tr>
					{{/with}}
					</tbody>
				</table>
			</template>		
			
			<div id="data_table"></div>	

If I only have {{items}}, like so:

...
<td>{{items}} </td>

I get this:

[object Object],[object Object],[object Object],[object Object]

Is this a bug or am I missing something?

@tuaris tuaris changed the title HTMX with Handlebars Client side tempalte does not work with JSON Arrays HTMX with Handlebars Client side template does not work with JSON Arrays Feb 19, 2025
@tuaris
Copy link
Author

tuaris commented Feb 19, 2025

I got it to work by changing the structure of the source data to match this example: #801 (comment). Also seems like you can't template the full table, but instead need to do tbody only?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant