How to write an array in Alpine.js

Question

I have the following code which should loop over an array to populate an HTML select element but getting zero data?

<div class="w-full" x-data="{classes: [
                            {
                            room: 'online',
                            id: 1,
                            },
                            {
                            room: 'in class',
                            id: 2,
                            }
                            ]}">
  <select name="" id="">
    <template x-for="class in classes" :key="class.id">
    <option x-text="class.room" :value="class.room"></option>
      </template>
  </select>
</div>

Answer 1

Please check this. I renamed class to cls (may be class word is conflicting though did not see any error in concole)

https://codepen.io/rajdeepdebnath/pen/MWyNoKj?editors=1010

<div class="w-full" x-data="{classes: [
                            {
                            room: 'online',
                            id: 1,
                            },
                            {
                            room: 'in class',
                            id: 2,
                            }
                            ]}">
  <select name="" id="">
    <template x-for="cls in classes" :key="cls.id">
    <option x-text="cls.room" :value="cls.room"></option>
      </template>
  </select>
</div>