Cannot get onMount to work with API

Maybe I’m misunderstanding how onMount works but I can see that the API is requested, it works, offers list is populated, I can output it to console.log, but the template never shows the OfferCard component, it stays on Loader as if the offers list is …


This content originally appeared on DEV Community and was authored by Stefan Midjich

Maybe I'm misunderstanding how onMount works but I can see that the API is requested, it works, offers list is populated, I can output it to console.log, but the template never shows the OfferCard component, it stays on Loader as if the offers list is empty.

<script>
  import { onMount } from 'svelte';
  import Navigation from '$lib/Navigation.svelte';
  import OfferCard from '$lib/OfferCard.svelte';
  import Loader from '$lib/Loader.svelte';
  let offers = []

  async function getOffers(store) {
    const url = `http://localhost:8000/offers/${store}`;
    try {
      const response = await fetch(url);
      if (response.ok) {
        return response.json();
      } else {
        throw new Error(`Response status: ${response.status}`);
      }
    } catch (error) {
      console.error(error.message);
    }
  }

  onMount(async () => {
    offers.push(...await getOffers('ica'));
    //console.log(offers)
  });
</script>

<section class="section">
  <div class="container">
    <Navigation />

    {#each offers as offer }
      <OfferCard title={offer.title} imageUrl={offer.url} />
    {:else}
      <Loader />
    {/each}
  </div>
</section>


This content originally appeared on DEV Community and was authored by Stefan Midjich


Print Share Comment Cite Upload Translate Updates
APA

Stefan Midjich | Sciencx (2024-09-19T11:27:44+00:00) Cannot get onMount to work with API. Retrieved from https://www.scien.cx/2024/09/19/cannot-get-onmount-to-work-with-api/

MLA
" » Cannot get onMount to work with API." Stefan Midjich | Sciencx - Thursday September 19, 2024, https://www.scien.cx/2024/09/19/cannot-get-onmount-to-work-with-api/
HARVARD
Stefan Midjich | Sciencx Thursday September 19, 2024 » Cannot get onMount to work with API., viewed ,<https://www.scien.cx/2024/09/19/cannot-get-onmount-to-work-with-api/>
VANCOUVER
Stefan Midjich | Sciencx - » Cannot get onMount to work with API. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/19/cannot-get-onmount-to-work-with-api/
CHICAGO
" » Cannot get onMount to work with API." Stefan Midjich | Sciencx - Accessed . https://www.scien.cx/2024/09/19/cannot-get-onmount-to-work-with-api/
IEEE
" » Cannot get onMount to work with API." Stefan Midjich | Sciencx [Online]. Available: https://www.scien.cx/2024/09/19/cannot-get-onmount-to-work-with-api/. [Accessed: ]
rf:citation
» Cannot get onMount to work with API | Stefan Midjich | Sciencx | https://www.scien.cx/2024/09/19/cannot-get-onmount-to-work-with-api/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.