Alpine: recorrer arrays y objetos

 <!-- recorrer un array normal -->
    <div x-data="getDataArray()">
        <ul>
            <template x-for="product in products"> 
                    <li>
                        <template x-if="product.precio>25">El precio es mayor de 25 - </template>
                        <span x-text="product.nombre"></span> - 
                        <span x-text="product.precio"></span> €
                    </li>
            </template>
        </ul>
    </div>
   
     <!-- recorrer un objeto -->
    <div x-data="getDataObject()">
           <ul>
            <template x-for="product in Object.values(products)"> 
                    <li>
                        <template x-if="product.precio>250">
                            El precio es mayor de 250
                        </template>
                        <span x-text="product.nombre"></span> - 
                        <span x-text="product.precio"></span> €
                    </li>
            </template>
        </ul>
    </div>
    
    <script>
        function getDataArray() {
            return {
                products: [
                    { 
                        id: 1,
                        nombre: 'uno',
                        precio: '11'
                    },
                    { 
                        id:2,
                        nombre: 'dos',
                        precio: '22'
                    },
                    { 
                        id:3,
                        nombre: 'tres',
                        precio: '33'
                    },
                    { 
                        id:4,
                        nombre: 'cuatro',
                        precio: '44'
                    },
                ]
            }
        }
        
        function getDataObject() {
            return {
                products: {
                    1: { 
                        id: 1,
                        nombre: 'uno',
                        precio: 111
                    },
                    2: { 
                        id:2,
                        nombre: 'dos',
                        precio: 222
                    },
                    3: { 
                        id:3,
                        nombre: 'tres',
                        precio: 333
                    },
                    4: { 
                        id:4,
                        nombre: 'cuatro',
                        precio: 444
                    },
                }
            }
        }
    </script>