sapper - Svelte Component variable is undefined if processed

Question

I'm working on a hackathon project and I have a SSR component which calls a regular component.

The SSR makes a request to an API to fetch some information and passes it to the regular component.

In the child I need to format a prop which contains an array of objects.

Something like:

<script>
  import { onMount } from "svelte";
  import { isArray } from "lodash";

  import StarReview from "./StarReview/StarReview.svelte";

  export let facility;
  let name, image, location, reviewCount, reviewAvg, distance, units;

  function formatUnits(units) {
    console.log(isArray(units));
    return units.map((item) => {
      console.log("item");
      let [dollars, cents] = item.price.text.toString().split(".");

      let price = {
        dollars,
        cents: cents || "00",
      };

      strikeTroughPrice = `$${item.regularPrice.text}`;

      return {
        sizeText,
        promotion,
        price,
        url,
        strikeTroughPrice,
      };
    });
  }

  onMount(async () => {
    name = facility.name;
    image = facility.images[0];
    location = `${facility.location.streetAddress}, ${facility.location.city}, ${facility.location.state}`;
    distance = facility.distance;
    reviewCount = facility.reviews.count;
    reviewAvg = facility.reviews.average;
    units = await formatUnits(facility.units);
    console.log(units);
  });
</script>

<div class="container is-fluid cont">
  <div class="columns is-centered">
    <div class="column is-10 is-10-tablet is-10-mobile">
      <div class="card">
        <div class="card-content">
          <div class="media">
            <div class="media-left">
              <figure class="image">
                <img src="{image}" alt="Placeholder" />
              </figure>
            </div>
            <div class="media-content">
              <p class="title is-4">{name}</p>
              <div class="columns">
                <div class="column is-narrow-tablet">
                  <span class="subtitle is-6">{location}</span>
                </div>
                <div class="column is-narrow-tablet">
                  <span class="subtitle is-6">
                    {distance} mile{distance !== 1 ? "s" : ""} away
                  </span>
                </div>
              </div>

              <p>
                <a href="#phone">Call now!</a>
              </p>
              <p>
                <a href="#phone">Get map & hours</a>
              </p>

              <p class="subtitle is-6">
                <StarReview rating="{reviewAvg}" />
                <a href="reviews" class="is-6">
                  {reviewCount} review{reviewCount !== 1 ? "s" : ""}
                </a>
              </p>
            </div>
          </div>
          {units} {#if units} {#each units as unit}
          <div class="content">
            <div class="media">
              <div class="media-left">
                <p class="unit-size has-text-weight-bold">
                  {unit.sizeText} unit
                </p>
                {#if unit.promotion}
                <span class="promo-string"> {unit.promotion} </span>
                {/if}
              </div>
              <div class="unit media-content">
                <p class="price has-text-right">
                  ${unit.price.dollars} <span>.{unit.price.cents}</span>
                </p>
                {#if unit.strikeTroughPrice}
                <p class="striketrough-price has-text-right">
                  {unit.strikeTroughPrice}
                </p>
                {/if}
              </div>
              <div>&gt;</div>
            </div>
          </div>
          {/each} {/if}
        </div>
      </div>
    </div>
  </div>
</div>

What happens at the end is that the function gets called but the map function only loops trough the first item and the return value of the function is undefined.

I've tried with async/await, by using the $: and nothing seems to help.

Why?

question from:https://stackoverflow.com/questions/66051195/svelte-component-variable-is-undefined-if-processed

Answer 1

Waitting for answers