Home / Snippets / How to Fetch API in Alpine.js
How to Fetch API in Alpine.js cover

How to Fetch API in Alpine.js

11.7K

2 years ago

0 comments

In this short snippet, you will learn how to fetch an external API in Apline.js. We'll be using the native Fetch API available to JavaScript.

Step 1: Install Alpine.js


First, you have to install Alpine.js using NPM or Yarn but If you do prefer the easy road then let's just reference the CDN. At the time of this writing, the version is 3.5.0 so if you are reading it on the future do refer to the documentation.
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Step 2: Define Alpine.js Data


Now you will have to define the Alpine.js data and it's as simple as calling the x-data. For this example, we'll be calling the Pokemon API so we can later on print some pokemon stats to the console.
<div x-data="{ pokemon: null }"></div>
The API endpoint will be as follows.
https://pokeapi.co/api/v2/pokemon/{pokemon-name-here}

Step 3: Call the Ajax From Alpine.js


To call an ajax using the "Fetch API" you can define it from within the x-init attribute where it will be called when Alpine.js initializes. The pokemon we'll be calling is "Pikachu".
https://pokeapi.co/api/v2/pokemon/pikachu
Do note that the logic can be extracted to its own function. For now, the logic will be as follows.
function getPokemon() {
    fetch('https://pokeapi.co/api/v2/pokemon/pikachu')
        .then((response) => response.json())
        .then((json) => this.pokemon = json);
}

Step 4: Attach Fetch Function to Alpine.js


Now to attach the function you can specify your code within the x-data attribute.
<div x-data="{
    pokemon: null,

    getPokemon() {
        fetch('https://pokeapi.co/api/v2/pokemon/pikachu')
            .then((response) => response.json())
            .then((json) => this.pokemon = json);
    }
}" x-init="getPokemon()"></div>
Now when you load the page it will automatically ajax and retrieve the pokemon details. To print out the details you can make use of the x-text inside the "div" tag itself.
<div x-data="{
    pokemon: null,

    getPokemon() {
        fetch('https://pokeapi.co/api/v2/pokemon/pikachu')
            .then((response) => response.json())
            .then((json) => this.pokemon = json);
    }
}" x-init="getPokemon()">
    <p x-text="pokemon.abilities[0].ability.name"></p>
    <p x-text="pokemon.abilities[1].ability.name"></p>
</div>
If you find this snippet to be useful do make sure to share it with your friends and cheers! happy coding.

Other Reads

notion avatar

Ahabz

Week-end developer currently experimenting with web, mobile, and all things programming.

Topics:

Frontend

Resource

Average

Average

Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this