Nested Template Lists with Alpine directives

[cybardev]

Continuation of #3611 (reply in thread)

Code

View full code...

script.js

const OneComponent = () => ({
    // component structure
    meta: {
        title: "A Component",
        data: ["x", "y", "z"],
        endpoint: API + "data/",
        show: true,
    },

    data: [0, 0, 0],

    async init() {
        [this.data[0], this.data[1], this.data[2]] = await Promise.all([
            UTILS.fetchText(this.meta.endpoint + "x/"),
            UTILS.fetchText(this.meta.endpoint + "y/"),
            UTILS.fetchText(this.meta.endpoint + "z/"),
        ]);

        // refresh data every 3 seconds
        setTimeout(() => this.init(), 3000);
    },
});


const OtherComponent = () => ({
    // same structure as above
});

// more components with same structure...

index.html

<aside x-cloak x-data="OneComponent" x-show="meta.show" x-transition>
    <h3 x-text="meta.title"></h3>
    <hr />
    <p>
        <span x-text="meta.data[0]"></span>:
        <span x-text="data[0]"></span>
    </p>
    <p>
        <span x-text="meta.data[1]"></span>:
        <span x-text="data[1]"></span>
    </p>
</aside>

<aside x-cloak x-data="OtherComponent" x-show="meta.show" x-transition>
    <!-- same innerHTML as above -->
</aside>

<!-- rest of the components... -->

Goal

I want to be able to do something like this...

script.js

const OneComponent = () => ({
    // component structure
    meta: {
        title: "A Component",
        data: ["x", "y", "z"],
        endpoint: API + "data/",
        show: true,
    },

    data: [0, 0, 0],

    async init() {
        [this.data[0], this.data[1], this.data[2]] = await Promise.all([
            UTILS.fetchText(this.meta.endpoint + "x/"),
            UTILS.fetchText(this.meta.endpoint + "y/"),
            UTILS.fetchText(this.meta.endpoint + "z/"),
        ]);

        // refresh data every 3 seconds
        setTimeout(() => this.init(), 3000);
    },
});

const OtherComponent = () => ({
    // same structure as above
});

// more components with same structure...

const AllComponents = {
    one: OneComponent,
    other: OtherComponent,
    // rest of the components...
}

index.html

<section x-data="{ components : AllComponents }">
    <template x-for="component in Object.keys(components)">
        <aside
            x-cloak
            x-data="component"
            x-show="meta.show"
            x-transition
        >
            <h3 x-text="meta.title"></h3>
            <hr />
            <template x-for="(item, i) in data">
                <p>
                    <span x-text="meta.data[i]"></span>:
                    <span x-text="item"></span>
                </p>
            </template>
        </aside>
    </template>
</section>

Problem

I'm having trouble with nested <template x-for="...">s not working properly. I think the outer loop executes but the inner loop doesn't. Is there a way to invoke the inner loop via JS after the outer loop completes execution?

Request

Any help regarding how to make such reusable components would be much appreciated.

PS: This is a client-side application. There will be no server-side processing available (assume GitHub Pages hosting environment).

[ekwoka]

The issue in this example is that Object.keys() returns the keys of the Object. Not the values.

I'm pretty sure you want the values like Object.values()

Nested loops do just work there isn't anything special you need to do with them

[cybardev]

Ok, yes, that was unintelligent of me. I apologize for not considering that first.

Thank you very much for your help. I really appreciate it 😊