Fetching JSON data with Alpine.js [ACCIO!]

May Kittens Devour Your Soul — Fri, 07 Jul 2023 17:16:26 +0000

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.

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!

Style your mark and leave a mark

May Kittens Devour Your Soul — Wed, 05 Jul 2023 13:29:19 +0000

Recently I browsed the web and ran into an article on Medium from 2017. It talked about multi colored backgrounds.

It said that linear gradients are cool for styling backgrounds.
No doubt. No doubt.

So of course, I used one of them... ON MARK ELEMENT!
Another on span...

And voila. They look great!
Today in a world where you have web color generators that basically mix those colors for you, into nice ones, it would be a shame not to utilize it on a web page.

So code and enjoy in making web prettier.

mark
  {background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);}

Example on jsFiddle

DEV Community: May Kittens Devour Your Soul

Fetching JSON data with Alpine.js [ACCIO!]

Style your mark and leave a mark