Nested data-wp-each loops

[webconstructor]

I have an array of data that contain objects.

I was wondering if something like

<ul data-wp-context='{	"list": [
	{ "lang": "en", "value": ["hello","see ya"] },
	{ "lang": "es", "value": ["hola","hasta luego"] },
	{ "lang": "nl", "value": ["hallo", "tot ziens"] }
	]
}'>
	<template data-wp-each--greeting="context.list">
		<li data-wp-text="context.greeting.lang">
			<template data-wp-each="context.greeting.value">
				<span data-wp-text="context.item"></span>
			</template>
		</li>
	</template>
</ul>

should work (which it doesn't right now) / is supported.

And if so, what would be the correct syntax...

[luisherranz]

Hey Inigo, it's not working because you have a data-wp-text directive on the li element, which replaces the inner text, thereby erasing the inner template.

If you move the data-wp-text directive to a span element, it works correctly:

<ul
  data-wp-interactive="myPlugin"
  data-wp-context='{	"list": [
        { "lang": "en", "value": ["hello","see ya"] },
        { "lang": "es", "value": ["hola","hasta luego"] },
        { "lang": "nl", "value": ["hallo", "tot ziens"] }
        ]
      }'
>
  <template data-wp-each--greeting="context.list">
    <li>
      <span data-wp-text="context.greeting.lang"></span>:
      <template data-wp-each="context.greeting.value">
        <span data-wp-text="context.item"></span>
      </template>
    </li>
  </template>
</ul>

You can see it in action on this StackBlitz: https://stackblitz.com/edit/vitejs-vite-kyfaej?file=index.html

[webconstructor]

Simple & logical.
Thx a bunch Luis