Estoy luchando con un problema de tiempo en el que recibo un error porque la respuesta de datos de la API que estoy obteniendo no se realiza antes de intentar procesar los datos.
Aquí está mi ejemplo:
### Template <div class="container mx-auto" x-data="loadIdentities()"> <template x-for="item in filteredIdentities" :key="item"> <h6 x-text="item.name"></h6> <em x-text="item.role"></em> </template> </div> ### SCRIPT <script> function loadIdentities() { return { search: "", myData: "", get filteredIdentities() { fetch(`/api_endpoint`) .then(res => res.json()) .then(data => { this.myData = data } ) var foundIdentities = this.myData.filter((item) => { return item.name .toLowerCase() .includes(this.search.toLowerCase()); }); return foundIdentities }, }; } </script> Uncaught TypeError: this.myForData.filter is not a function¿Hay alguna manera agradable de hacer que el procesamiento del javascript espere a que se complete la solicitud de API y los datos se completen desde la API?
También puede devolver una matriz vacía siempre que no haya datos para mostrar.
Ejemplo:
(aquí cargo las Identidades una vez usando el método init() y luego filtro usando el método getFilteredIdentities )
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <script src="//unpkg.com/alpinejs" defer></script> <div class="p-5 mx-auto" x-data="loadIdentities()"> <input class="border px-2" placeholder="Filter Identities..." x-model="search" x-on:change="setFilteredItentities()" /> <p class="text-gray-400" x-show="isLoading">Loading Identities...</p> <template x-for="item in getFilteredIdentities" :key="item.id"> <div class="mt-2 flex items-center"> <h6 x-text="item.first_name"></h6> <p class="text-xs text-gray-500 ml-2" x-text="item.email"></p> </div> </template> </div> <script> function loadIdentities() { return { search: "", isLoading: false, allIdentities: [], init() { this.isLoading = true fetch(`https://reqres.in/api/users`) .then(res => res.json()) .then(data => { this.allIdentities = data.data }) this.isLoading = false; }, getFilteredIdentities() { if (!this.allIdentities || !this.search) { return this.allIdentities } var result = this.allIdentities.filter((item) => { return item.first_name .toLowerCase() .includes(this.search.toLowerCase()); }) return result } } } </script>Puedes usar esperar. Declare la función como asíncrona como: función asíncrona filteredIdentities (){
const response = await fetch('stuff') const data = await response.json() return data.filter((item) => return item.name .toLowerCase() .includes(this.search.toLowerCase()); }); }La función devuelve una promesa y cuando se resuelva, tiene una matriz