Svelteでfetch APIを使ったAPIデータ表示(Svelte✕JavaScript)

実装方法

src/App.svelte

<script>
	import { onMount } from 'svelte'
	import { apiData, drinkNames } from './store.js'

	onMount(async () => {
		fetch('https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=Bourbon')
		.then(response => response.json())
		.then(data => {
			apiData.set(data)
		}).catch(error => {
			console.log(error)
			return []
		})
	})
</script>

<main>
	<h1>Whiskey Drinks Menu</h1>
	<ul>
	{#each $drinkNames as drinkName}
		<li>{drinkName}</li>
	{/each}
	</ul>
</main>

<style>
</style>

src/store.js

import { writable, derived } from 'svelte/store'

// APIデータを格納する場所
export const apiData = writable([])

// APIデータを表示する。データがない場合は空リストを出力する
export const drinkNames = derived(apiData, ($apiData) => {
    if ($apiData.drinks) {
        return $apiData.drinks.map(drink => drink.strDrink)
    }
    return []
})

開発環境

• Visual Studio Code
• Svelte
• JavaScript