Korbs revised this gist . Go to revision
2 files changed, 17 insertions, 12 deletions
README.md (file deleted)
| @@ -1,11 +0,0 @@ | |||
| 1 | - | # Fetching JSON Data in Astro | |
| 2 | - | ## Fetch | |
| 3 | - | To fetch data in Astro, you need to request from the JSON url: | |
| 4 | - | ```jsx | |
| 5 | - | const RawData = new Request('https://example.org/data.json') | |
| 6 | - | ``` | |
| 7 | - | ||
| 8 | - | Then, format it to JSON, if not already: | |
| 9 | - | ```jsx | |
| 10 | - | const JsonData = RawData.json() | |
| 11 | - | ``` | |
index.astro
| @@ -1 +1,17 @@ | |||
| 1 | - | ||
| 1 | + | --- | |
| 2 | + | // Request Data | |
| 3 | + | const Teams = await fetch('https://example.org/data.json').then((response) => response.json()) | |
| 4 | + | --- | |
| 5 | + | ||
| 6 | + | <!-- Map JSON Data --> | |
| 7 | + | {Teams.map((team) => | |
| 8 | + | { | |
| 9 | + | <div class="team"> | |
| 10 | + | <h2>{team.name}</h2> | |
| 11 | + | <p>{team.amount} Members</p> | |
| 12 | + | </div> | |
| 13 | + | } | |
| 14 | + | )} | |
| 15 | + | ||
| 16 | + | <!-- Get specific data, this example grabs data from the 12th entry --> | |
| 17 | + | {Team[12].name} | |
Korbs revised this gist . Go to revision
2 files changed, 12 insertions
README.md(file created)
| @@ -0,0 +1,11 @@ | |||
| 1 | + | # Fetching JSON Data in Astro | |
| 2 | + | ## Fetch | |
| 3 | + | To fetch data in Astro, you need to request from the JSON url: | |
| 4 | + | ```jsx | |
| 5 | + | const RawData = new Request('https://example.org/data.json') | |
| 6 | + | ``` | |
| 7 | + | ||
| 8 | + | Then, format it to JSON, if not already: | |
| 9 | + | ```jsx | |
| 10 | + | const JsonData = RawData.json() | |
| 11 | + | ``` | |
index.astro(file created)
| @@ -0,0 +1 @@ | |||
| 1 | + | ||