+page.svelte:
<script> import { onMount } from 'svelte'; let careers = []; const fetchCareers = async () => { const apiUrl = 'http://localhost:4000/api/v1/careers'; try { const response = await fetch(apiUrl); if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } const data = await response.json(); careers = data; console.log('Updated careers:', careers); } catch (error) { console.error('Error fetching careers:', error.message); console.error(error); } }; onMount(fetchCareers);</script><h1>Careers</h1>{#if careers.length > 0} {#each careers as career (career.id)}<p>{career.name}</p> {/each}{:else}<p>Failed to load careers...</p>{/if}
careers.length seems to be undefined. Wondering if I am using my if else block incorrectly? I thought this may be a CORS issue with my API but I am able to get my POST function working so I'm unsure why the names aren't being rendered correctly in the browser?