#Transform Tabular data to Astro props

1 messages · Page 1 of 1 (latest)

tender marsh
#

I have a Google Sheets table with over 1000 rows of info on a business. Using one Astro template I want generate a page for each business. See below for my current approach. Currently I only have 2 businesses added, but once I have over a 1000 this file will be very big. Is this the best way of doing things? If so, what would be the best way to convert my Google Sheets table to this props format of Astro?

# 
---
export async function getStaticPaths() {
  const pages = [
    {
        slug: "s1",
        name: "n1",
        street: "s1",
        number: "12",
        postalcode: "9255",
        city: "Buggenhout",
        telephone: "t1",
        email: "e1e"
    },
    {
        slug: "s2",
        name: "n2",
        street: "s2",
        number: "13",
        postalcode: "8570",
        city: "Anzegem",
        telephone: "t2",
        email: "e2",
        website: "w2",
        specialties: ['Sport', 'Geriatrie'],
        languages: ['Nederlands', 'Frans']
    },
  ];
  return pages.map(({ slug, name, street, number, postalcode, city, telephone, email, website, specialties, languages }) => {
    return {
      params: { slug },
      props: { name, street, number, postalcode, city, telephone, email, website, specialties, languages },
    };
  });
}


const { name, street, number, postalcode, city, telephone, email, website, specialties, languages } = Astro.props;
---

<html>
  <head>
    <title>{name} | Site</title>
  </head>
  <body>
    <Navigation/>
    <main>
        <article>
            <h1>{name}</h1>
            {specialties && <h2>Specialisaties</h2>
            <ul>{specialties.map((specialty) => <li>{specialty}</li> )}</ul>}

            {languages && <h2>Talen</h2>
            <ul>{languages.map((language) => <li>{language}</li> )}</ul>}

            <h2>Contactgegevens</h2>
            <p>Adres: <adress>{street} {number}, {postalcode} {city}</adress></p>
            {telephone && <p>Telefoon: {telephone}</p>}
            {email && <p>E-mailadres: {email}</p>}
            {website && <p>Website: {website}</p>}
        </article>
    </main>
  </body>
</html>
royal lava
#

You could store the array in a js/ts file and export it

#

I hope you're not copying the data manually? I'm pretty sure google sheet has an API that you can use to access your data directly

marble river
#

you can split the task in two steps, first table to json conversion, which you can do with any external tool, you can read the table in .xlsx or .csv. scripting in node or python should be quite easy. Then formats like .json can be directly imported in .astro.
You could have higher automation bu harder to achieve if you acess google sheet API, then you have caching issue from one side, and affecting your astro every time the data format changes, which approach is best is up to you.

tender marsh
marble river
tender marsh
#

This works, got one small problem though, that is. If the json contains the ë character it shows it like ĂŤ on my site. How can I fix this?