Try to get nested data by types but not working

[NoxzMSTR]

Hi guys i am new to the alpine js and from intials it is working awsome but now i got into complex loop with condtions and it is showing the log but the conditions or nested loop not working

<div class="tab-content mt-6">
            <div class="tab-pane fade" :class="activeTab ? 'active show' : ''">
                <div class="d-flex d-grid flex-wrap gap-4 justify-content-center">
                    <template x-for="(dateData, type) in monthData">
                        <div x-init="console.log(type);">
                            <template x-show="parseInt(type) === 1">

                                <!--begin::Option-->
                                <div x-data="{
                                    dates: {},
                                    setDates() {
                                        this.dates = {};
                                        const self = this;
                                        $.each(dateData, function(index, date) {
                                            var date = formatDate(date, 'Y-m-d');
                                            self.dates[index] = date;
                                        });
                                    }
                                }">
                                    <input type="checkbox" class="btn-check collection_dates_check"
                                        x-model="collection_dates" :value="Object.values(dates).join(', ');"
                                        :id="'collection_dates_' + (dates)" hidden />
                                    <label
                                        class="btn btn-outline btn-outline-dashed btn-active-primary p-2 d-flex align-items-center gap-2"
                                        :for="'collection_dates_' + (dates)">
                                        <template x-for="(date, id) in dateData" :key="id">

                                            <div class="card card-flush">
                                                <!--begin::Header-->
                                                <div
                                                    class="border-0 card-header justify-content-center px-0  min-h-auto">
                                                    <h3 class="card-title fw-bold m-0 mt-2">
                                                        <i class="ki-duotone ki-calendar-2 fs-3x">
                                                            <span class="path1"></span>
                                                            <span class="path2"></span>
                                                            <span class="path3"></span>
                                                            <span class="path4"></span>
                                                            <span class="path5"></span>
                                                        </i>
                                                    </h3>

                                                </div>
                                                <!--end::Header-->
                                                <!--begin::Body-->
                                                <div class="card-body p-2">
                                                    <!--begin::Stats-->
                                                    <p class="fs-4 fw-bolder m-0" x-text="formatDate(date, 'jS')">
                                                    </p>
                                                    <p class="fs-4 fw-bolder m-0" x-text="formatDate(date, 'D')">
                                                    </p>
                                                    <p class="fs-7" x-text="formatDate(date, 'M-Y')">
                                                    </p>
                                                    <!--end::Stats-->
                                                </div>
                                                <!--end::Body-->
                                            </div>
                                        </template>

                                    </label>
                                </div>
                                <!--end::Option-->
                            </template>
                        </div>
                        <div>
                            <template x-show="parseInt(type) === 0">
                                <span x-text="type"></span>
                                <template x-for="(date, id) in dateData" :key="id">

                                    <!--begin::Option-->
                                    <div>
                                        <input type="checkbox" class="btn-check collection_dates_check"
                                            x-model="collection_dates" :value="date"
                                            :id="'collection_dates_' + (date)" hidden />
                                        <label
                                            class="btn btn-outline btn-outline-dashed btn-active-primary p-2 d-flex align-items-center gap-2"
                                            :for="'collection_dates_' + (date)">

                                            <div class="card card-flush">
                                                <!--begin::Header-->
                                                <div
                                                    class="border-0 card-header justify-content-center px-0  min-h-auto">
                                                    <h3 class="card-title fw-bold m-0 mt-2">
                                                        <i class="ki-duotone ki-calendar-2 fs-3x">
                                                            <span class="path1"></span>
                                                            <span class="path2"></span>
                                                            <span class="path3"></span>
                                                            <span class="path4"></span>
                                                            <span class="path5"></span>
                                                        </i>
                                                    </h3>

                                                </div>
                                                <!--end::Header-->
                                                <!--begin::Body-->
                                                <div class="card-body p-2">
                                                    <!--begin::Stats-->
                                                    <p class="fs-4 fw-bolder m-0" x-text="formatDate(date, 'jS')">
                                                    </p>
                                                    <p class="fs-4 fw-bolder m-0" x-text="formatDate(date, 'D')">
                                                    </p>
                                                    <p class="fs-7" x-text="formatDate(date, 'M-Y')">
                                                    </p>
                                                    <!--end::Stats-->
                                                </div>
                                                <!--end::Body-->
                                            </div>


                                        </label>
                                    </div>
                                    <!--end::Option-->
                                </template>
                            </template>
                        </div>

                    </template>
                </div>
            </div>
        </div>

[SimoTod]

One of your templates has 2 root elements. You are only allowed one

[NoxzMSTR]

Hmm i added the 1 root element but condition still not working

`

                        <template x-show="parseInt(type) == 1">
                            <!--begin::Option-->
                            <div x-data="{
                                dates: {},
                                setDates() {
                                    this.dates = '';
                                    var dates = {};
                            
                                    if (!Array.isArray(dateData)) {
                                        return false;
                                    }
                            
                                    $.each(dateData, function(index, date) {
                                        dates[index] = date;
                                    });
                            
                                    this.dates = Object.values(dates).join(',');
                                }
                            }">
                                <input type="checkbox" class="btn-check collection_dates_check"
                                    x-model="collection_dates" :value="Object.values(dates).join(', ');"
                                    :id="'collection_dates_' + (dates)" hidden />
                                <label
                                    class="btn btn-outline btn-outline-dashed btn-active-primary p-2 d-flex align-items-center gap-2"
                                    :for="'collection_dates_' + (dates)">
                                    <template x-for="(date, dID) in dateData" :key="dID">
                                        
                                    </template>
                                </label>
                            </div>
                            <!--end::Option-->
                        </template>
                        <span x-text="parseInt(type) == 0"></span>Here it is giving true showing
                        <template x-show="parseInt(type) == 0"> Here it is correct but not showing
                            <div> 
                                <span x-text="parseInt(type) == 0"></span>
                                <template x-for="(date, dID) in dateData" :key="dID">
                                
                                </template>
                            </div>
                        </template>

                    </div>`

[ekwoka]

x-show does not work on templates. You seem to be looking for x-if.

or I should say, it works, but isn't doing what you are wanting it to do.

[NoxzMSTR]

Thank you @SimoTod & @ekwoka i got it working