I forgårs

Header.astro
const { title } = Astro.props;
<button>
  <slot />
</button>
---
import Card from "../components/Card.astro"
---
<p>{description}</p>
<style>
  p { background: red }
</style>

I går

<MainLayout>
  <Card title="My Card" />
</MainLayout>
{ title && <h2>{title}</h2> }
├── src/
    └── layouts/
---
// JavaScript udenfor browseren
---
<img src="/public/images/myImage.webp">

Astro

Hvor er vi?

  • Hvad er fordelen ved at bruge en layout-component?
  • Hvad er conditional rendering?
  • Hvordan navigerer jeg imellem sider i /pages?
  • Hvor lægger vi billeder (for nu)?

fetch() & map()

Astro

I dag

Data fetching i Astro

<Card title="Kunstner 1" />
<Card title="Kunstner 2" />
<Card title="Kunstner 3" />
<Card title="Kunstner 4" />
<Card title="Kunstner 5" />
<Card title="Kunstner 6" />
<Card title="Kunstner 7" />
<Card title="Kunstner 8" />
<Card title="Kunstner 9" />
<Card title="Kunstner 10" />

Det, vi gør nu

I dag

Data fetching i Astro

{
  artists.map((artist) => <Card title={artist.title} />)
}

Det, vi gør om lidt

fetch(something)
  .then(response => response.json())
  .then(myFunction)

fetch()

Tema 7

async function getData() {
  const response = await fetch("...");
  const data = await response.json()
  myFunction(data)
}
getData()

fetch()

Alternativ syntaks

---
const response = await fetch("...");
const data = await response.json();
---

fetch()

I Astro får vi lov til...

---
const data = await fetch("...").then(response => response.json());
---

fetch()

... eller som one-liner

---
const data = await fetch("...").then(response => response.json());
console.log(data)
---

fetch()

Log data

---
const data = await fetch("...").then(response => response.json());
console.log(data)
---

fetch()

Log sker på "serveren"

---
const data = await fetch("...").then(response => response.json());
console.log(data)
---

🤯

fetch()

Log sker på "serveren"

---
const now = new Date();
const localTime = now.toLocaleTimeString("da-DK");

console.log(localTime)
---

JavaScript på serveren ("build time")

Bliver logget i terminalen

JavaScript i browseren ("client side")

---
const now = new Date();
const localTime = now.toLocaleTimeString("da-DK");

console.log(localTime)
---

<script>
  console.log("Client side")
</script>

Bliver logget i browseren

Bliver logget i terminalen

JavaScript i browseren ("client side")

---
const now = new Date();
const localTime = now.toLocaleTimeString("da-DK");

console.log(localTime)
---

<script>
  console.log("Client side")
</script>

Data-rendering

Tema 7

fetch("https://kea-alt-del.dk/t7/api/products")
  .then((res) => res.json())
  .then((myData) => {
    myData.forEach((product) => {
      const clone = template.content.cloneNode(true);

      const h3 = clone.querySelector("h3");
      h3.textContent = product.productdisplayname;

      container.appendChild(clone);
    });
});
forEach

Data-rendering

Tema 7

forEach

itererer gennem eksisterende elementer og gør noget

Data-rendering

forEach() vs map()

forEach

itererer gennem eksisterende elementer og gør noget

map

itererer over et array og returnerer et nyt, transformeret array

Data-rendering

Generer nye elementer

map
---
const produkter =                            ;
---
<ul>
  {produkter.map((produkt) => (
    <li>{produkt}</li>
  ))}
</ul>
['Æble', 'Banan', 'Citron']

Data-rendering

Astro-magi

---
const produkter = ['Æble', 'Banan', 'Citron'];
---
<ul>
  {

  }
</ul>
['Æble', 'Banan', 'Citron']

ÆbleBananCitron

Data-rendering

Astro-magi

---
const produkter = ['Æble', 'Banan', 'Citron'];
---
<ul>
  {

  }
</ul>
[<li>Æble</li>, <li>Banan</li>, <li>Citron</li>]
  • Æble
  • Banan
  • Citron

Nyt, transformeret array

Data-rendering

Astro-magi

---
const produkter = ['Æble', 'Banan', 'Citron'];
---
<ul>
  {
  	produkter.map((produkt) => (
      <li>{produkt}</li>
  	))
  }
</ul>
  • Æble
  • Banan
  • Citron

map() itererer over arrayet og returnerer listeelementer

Data-rendering

Astro kan også returnere components

---
const produkter = ['Æble', 'Banan', 'Citron'];
---
<ul>
  {
  	produkter.map((produkt) => (
      <Card title={produkt} />
  	))
  }
</ul>
  • Æble
  • Banan
  • Citron

map() itererer over arrayet og returnerer en component

fetch() + map() = 🤩

Data-rendering

Data-rendering

JSON

---
const artists = await fetch("...").then(response => response.json());
---
<ul>
  {
  	artists.map((artist) => (
      <Card title={artist.title}
    		img={artist.image.url}
			featured={artist.featured}
	  />
  	))
  }
</ul>

øvelse

Fetch og map

Render HTML i browseren på baggrund af et lille datasæt (find øvelsen på Fronter)

Conditional rendering

Vis eller skjul indhold baseret på bestemte betingelser

Conditionals

---
const artists = await fetch("...").then(response => response.json());
---
<ul>
  {
  	artists.map((artist) => (
      <Card title={artist.title}
    		img={artist.image.url}
			featured={artist.featured}
	  />
  	))
  }
</ul>
---
const { title, img, featured } = Astro.props;
---
<article>
  <h2>...</h2>
  

  
  <img />
</article>
{
}
&&
visible
<p class="featured">Featured artist</p>

Conditionals

---
const { title, img, featured } = Astro.props;
---
<article>
  <h2>...</h2>
  
  
  
  <img />
</article>
<p class="featured">Featured artist</p>
{
}
&&
visible

Conditionals

---
const { title, img, featured } = Astro.props;
---
<article>
  <h2>...</h2>
  
  
  
  <img />
</article>
<p class="featured">Featured artist</p>
{
}
&&
featured

Conditionals

---
const { title, img, featured } = Astro.props;
---
<article>
  <h2>...</h2>
  
  
  
  <img />
</article>
<p class="featured">Featured artist</p>
{
}
&&
featured

Conditionals

hvis featured er sand

---
const { title, img, featured } = Astro.props;
---
<article>
  <h2>...</h2>
  
  
  
  <img />
</article>
<p class="featured">Featured artist</p>
{
}
&&
featured

Conditionals

vis HTML

---
const { title, img, featured } = Astro.props;
---
<article>
  <h2>...</h2>
  

  
  
  
  
  
  <img />
</article>
<p class="featured">Featured artist</p>
{
}
&&
featured

Conditionals

(
)
---
const { title, img, featured } = Astro.props;
---
<article class={featured && "featured-artist"}>
  <h2>...</h2>
  
  {featured && <p class="featured">Featured artist</p>}
  
  <img />
</article>

Conditionals

Tema-opgaven

Kom i gang

Mandag

I dag

Resten af dagen

Projektarbejde og vejledning

Astro (part 3)

By Dannie Vinther

Astro (part 3)

  • 93

More from Dannie Vinther