Me cuesta entender por qué mi bucle muestra esto:

 [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]

Probé muchas cosas con fetch y axios pero termina igual 😞

Aquí está mi componente Svelte:

 <script> import axios from 'axios'; let results = []; const fetchYoutubeList = async () => { const searchQuery = 'mySearch'; const maxResults = 10; const apiKey = import.meta.env.VITE_APP_YOUTUBE_API_KEY; const apiBaseUrl = import.meta.env.VITE_APP_API_BASE_URL; await axios.get(`${apiBaseUrl}`, { params: { part: 'snippet', maxResults: maxResults, q: searchQuery, type: 'video', key: apiKey } }) .then(response => { console.log(response.data); results = response.data.items; console.log(results); console.log(typeof results); }); }; </script> <section> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2" on:click|once={fetchYoutubeList} > Bring me joy </button> <div> <ul> {#each results as item } <li> {item.id} </li> {/each} </ul> </div> </section>

Aquí los resultados de mis registros:

Creo que me perdí algo, pero no puedo encontrar qué, así que si algunos de ustedes tienen una idea, me alegraría si me pueden depurar 😊

Gracias 🙏