htmx-json

Support for json response in htmx.

Documentation

What is this?

This htmx extension adds support for using json response in htmx. By using a combination of attributes and templates it can easily update the dom with new values from the json response. This way you can write your html in the html file and rely on a small json response.

Install

Just reference it from a cdn like unpkg, just like you do with htmx.

``

html





Usage



Given an api endpoint that returns this json:

json

{

  "title": "Data",

  "show": true,

  "list": ["very", "simple", "and", "cool"]

}





Add attributes and templates to an html

html

`This will be replaced by the value of` title

This will only be shown when show is true





You can use these attributes:



-

json-text

json-if

json-each

@attribute

.property

json-show/json-hide

json-with





They are described below



Features



$3



Add the

json-text

 attribute to change the textContent of the element.

html

This will contain the value of the

name

 property

"

  >Use JavaScript template tags to interpolate text>

  >You can add any JavaScript expression to the attribute>





You can also use json templating directly in the text content. The following are equivalent to the above three.

html

${name}

My name is ${name}!

${isSomething ? 'Yes' : 'No'}





The disadvantage of doing it like this is that the template string is shown while the page loads and is only swapped out when the json is applied.

This makes this more suitable for use inside templates, which aren't shown until the json is applied



You can use

json-ignore

 to stop interpolation of text, when it would cause conflicts:

html

$123





$3



Ignore entire subtree from being processed.

json-ignore

 also ignores any attribute after it, so you can stop processing in the middle of the attributes:

html





$3



You can conditionally have html using a template tag with

json-if, and optionally json-else-if and json-else

html





You can have any number of

json-else-if

 to create a kind of switch statement:

html





$3



Loop over a list using

json-each

, for example give the following json:

json

{

  "list": [

    { "id": "first", "value": "First"}

    { "id": "second", "value": "Second"}

    { "id": "third", "value": "Third"}

    { "id": "fourth", "value": "Fourth"}

  ]

}

html





You should use

json-key

 to refer to a unique string value in each item if you want the list to update correctly:

html





You can also supply an object, where the entries will be iterated over. Note that

json-key

 is ignored, and you will experience weird things if the keys are integer values.



$3



Set any attribute using

@attribute="value"

html

">${name}





$3



Set any property using

.property="value"

html

${name}





The property name needs to be converted from

camelCase to kebab-case

 for it to be valid html.



This means you can do very dirty stuff:

html



  This will be replaced with the contents of

html

 using innerHTML!





$3



Show or hide (using

display: none

) an element.

html

This will only be visible if condition is true

This will only be visible if condition is false



  This will be hidden until condition becomes true





If you want it to be initially hidden you can use

style="display: none"

 to hide it until json is applied.



$3



Form fields are special, they will automatically get their value from the json using the name attribute. For example:

json

{

  "text": "something",

  "checked": true,

  "choice": "second"

}

html



  >This will have the value

something since name="text" and "text":
"something"

>





This will be checked since

name="checked" and "checked": true





 First

 Second

 Third

  >The second option will be selected because

name="choice", value="second"

and

"choice": "second"





If you need to set the value to something other than the value directly you can use

.value="something"

 to do so:

html





$3



Go into an object using

json-with

 to select the property to use:

html



  Street: ${street}

  Postal code: ${postCode}

  Country: ${country}





$3



-

$this

: The current object

-

$parent: The parent object, inside json-with or json-each

$index: The current index, inside json-each

$key: The current key, inside json-each





If you have nested

json-with and/or json-each you can use $parent multiple times, and to get the $index and $key further up, for example $parent.$index`.

htmx-json

Support for json response in htmx.

Documentation

What is this?

Install

Just reference it from a cdn like unpkg, just like you do with htmx.

``

html





Usage



Given an api endpoint that returns this json:

json

{

  "title": "Data",

  "show": true,

  "list": ["very", "simple", "and", "cool"]

}





Add attributes and templates to an html

html

`This will be replaced by the value of` title

This will only be shown when show is true





You can use these attributes:



-

json-text

json-if

json-each

@attribute

.property

json-show/json-hide

json-with





They are described below



Features



$3



Add the

json-text

 attribute to change the textContent of the element.

html

This will contain the value of the

name

 property

"

  >Use JavaScript template tags to interpolate text>

  >You can add any JavaScript expression to the attribute>





You can also use json templating directly in the text content. The following are equivalent to the above three.

html

${name}

My name is ${name}!

${isSomething ? 'Yes' : 'No'}





The disadvantage of doing it like this is that the template string is shown while the page loads and is only swapped out when the json is applied.

This makes this more suitable for use inside templates, which aren't shown until the json is applied



You can use

json-ignore

 to stop interpolation of text, when it would cause conflicts:

html

$123





$3



Ignore entire subtree from being processed.

json-ignore

 also ignores any attribute after it, so you can stop processing in the middle of the attributes:

html





$3



You can conditionally have html using a template tag with

json-if, and optionally json-else-if and json-else

html





You can have any number of

json-else-if

 to create a kind of switch statement:

html





$3



Loop over a list using

json-each

, for example give the following json:

json

{

  "list": [

    { "id": "first", "value": "First"}

    { "id": "second", "value": "Second"}

    { "id": "third", "value": "Third"}

    { "id": "fourth", "value": "Fourth"}

  ]

}

html





You should use

json-key

 to refer to a unique string value in each item if you want the list to update correctly:

html





You can also supply an object, where the entries will be iterated over. Note that

json-key

 is ignored, and you will experience weird things if the keys are integer values.



$3



Set any attribute using

@attribute="value"

html

">${name}





$3



Set any property using

.property="value"

html

${name}





The property name needs to be converted from

camelCase to kebab-case

 for it to be valid html.



This means you can do very dirty stuff:

html



  This will be replaced with the contents of

html

 using innerHTML!





$3



Show or hide (using

display: none

) an element.

html

This will only be visible if condition is true

This will only be visible if condition is false



  This will be hidden until condition becomes true





If you want it to be initially hidden you can use

style="display: none"

 to hide it until json is applied.



$3



Form fields are special, they will automatically get their value from the json using the name attribute. For example:

json

{

  "text": "something",

  "checked": true,

  "choice": "second"

}

html



  >This will have the value

something since name="text" and "text":
"something"

>





This will be checked since

name="checked" and "checked": true





 First

 Second

 Third

  >The second option will be selected because

name="choice", value="second"

and

"choice": "second"





If you need to set the value to something other than the value directly you can use

.value="something"

 to do so:

html





$3



Go into an object using

json-with

 to select the property to use:

html



  Street: ${street}

  Postal code: ${postCode}

  Country: ${country}





$3



-

$this

: The current object

-

$parent: The parent object, inside json-with or json-each

$index: The current index, inside json-each

$key: The current key, inside json-each





If you have nested

json-with and/or json-each you can use $parent multiple times, and to get the $index and $key further up, for example $parent.$index`.

htmx-json

htmx-json

What is this?

Install

Usage

This will be replaced by the value of title

Features

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

htmx-json

htmx-json

What is this?

Install

Usage

This will be replaced by the value of title

Features

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

`This will be replaced by the value of` title

`This will be replaced by the value of` title