Fetching JSON data with Alpine.js [ACCIO!]

Familiarize yourself with alpine.js if you haven't already. It's after all, probably the best lightweight solution to which every webdev should lean to these days.

Anyway, one could imagine my frustration and fury, after looking throught bunch of internet searches for something this simple, only to only find out what I really wanted to do - and I wanna display content of JSON files in a reading suitable way [without boring tables].

So here is the magic code in all it's simplicity:

We shall start with div that will call data from Harry Potter api

<div x-cloak 
     x-data="{magic: [], isLoading: true }" 
     x-init="async () => {
          const response = await fetch('https://potterhead-api.vercel.app/api/spells')
          const data = await response.json();
          magic = data;
          console.log(data)
          isLoading = false;
        }">

x-cloak - is something we must have in order for content not to blink (idk... seems like minor annoyance and bitter flaw of alpine.js so far)

x-data - says that our array is called magic

main stuff is this

x-init - which asynchronously calls and fetches json from API

as you can see next in code, we say that magic = data
so that magic array is gonna be our data

Unlike people who put everything in tables, we're gonna put it in some bulma tags

Here is our template. This is what finally DISPLAYS all that magic that happens once we get api answer and data

    <template x-for="spell, index in magic">
      <div class="field is-grouped is-grouped-multiline">

        <div class="control">
          <div class="tags has-addons">            
            <span class="tag is-link is-medium" x-text="index+1"></span>
            <span class="tag is-info is-medium" x-text="spell.name"></span>
            <span class="tag is-dark is-medium" x-text="spell.description"></span>
          </div>
        </div>
      </div>
    </template>

We now say that for spell, index in magic
we shall have this list of spell names and spell description.

index means that we shall count.
You see that we count+1 with index+1.

x-text="spell.name" - gets us name of the spell
x-text="spell.description" - gets us description of it.

So this is small overview of what happens in this code which is of course, available in this demo PEN on codepen.

I'll advise you to be careful with JS as one is to be careful with spells. One wrongly written levi-o-sah and you're in trouble.

PS

You can name your array differently, but be sure to change that in template then, and in that line where you = it with data.

You can also name spell something else.

You can pull all kinds of .json files like this and get data from them. Especially useful if you need a collection of something that is already premade, so you don't have to waste your time writing same things all over again. Because there's probably always someone who already did that.

Good luck!