Alpine.js fetch data on `x-init`

alpine-js-fetch-data-on-x-init.markdown

Alpine.js fetch data on x-init

Fetch Gist API, parse the Gist description for titles and tags (via Lepton Snippet Manager) and save it to sessionStorage to not hit the API too often.

A Pen by vsamaru on CodePen.

License.

index.html

<div 
     class="h-full bg-gray-200 text-gray-800 p-4 lg:p-8" 
     x-data="gistsData()" 
     x-init="init()"
>
  <header class="flex items-center mb-3">
   <h1 class="flex-grow" x-text="title"></h1>
    <button
       class="py-2 px-4 rounded bg-blue-500 text-white flex-grow-0"
       type="button"
       x-on:click="reload()"
    >
     Reload
    </button>   
  </header>

  <ul class="list-reset flex flex-col">
    <template x-for="gist in gists" :key="gist.id">
      <li class="relative -mb-px block border p-4 border-grey">
        <a x-bind:href="gist.html_url" x-text="gist.parsed.title" class="font-bold"></a><br>
        <small x-text="gist.parsed.description"></small>
      </li>
    </template>
  </ul>
  
    <p class="mt-3 text-xs">
      <a href="https://developer.github.com/v3/gists/" target="_blank">API</a> · 
      <a href="https://github.com/alpinejs/alpine" target="_blank">Alpine.js</a> · 
      <a href="https://tailwindcss.com/docs" target="_blank">Tailwind</a> · 
      <a href="https://tailwindcomponents.com/component/bootstrap-4-list-group-clone" target="_blank">Tailwind Components</a> · 
      <a href="https://github.com/hackjutsu/Lepton" target="_blank">Lepton Snipped Management</a>
    </p>
  
</div>
<div 
     class="h-full bg-gray-200 text-gray-800 p-4 lg:p-8" 
     x-data="gistsData()" 
     x-init="init()"
>
  <header class="flex items-center mb-3">
   <h1 class="flex-grow" x-text="title"></h1>
    <button
       class="py-2 px-4 rounded bg-blue-500 text-white flex-grow-0"
       type="button"
       x-on:click="reload()"
    >
     Reload
    </button>   
  </header>

  <ul class="list-reset flex flex-col">
    <template x-for="gist in gists" :key="gist.id">
      <li class="relative -mb-px block border p-4 border-grey">
        <a x-bind:href="gist.html_url" x-text="gist.parsed.title" class="font-bold"></a><br>
        <small x-text="gist.parsed.description"></small>
      </li>
    </template>
  </ul>
  
    <p class="mt-3 text-xs">
      <a href="https://developer.github.com/v3/gists/" target="_blank">API</a> · 
      <a href="https://github.com/alpinejs/alpine" target="_blank">Alpine.js</a> · 
      <a href="https://tailwindcss.com/docs" target="_blank">Tailwind</a> · 
      <a href="https://tailwindcomponents.com/component/bootstrap-4-list-group-clone" target="_blank">Tailwind Components</a> · 
      <a href="https://github.com/hackjutsu/Lepton" target="_blank">Lepton Snipped Management</a>
    </p>
  
</div>
<script>
function gistsData() {
  return {
    title: 'Latest Gists',
    gists: [],
    reload() {
      sessionStorage.removeItem("gists");
      this.gists = [];
      this.init();
    },
    init() {
      // Testdata, in case I hit my 60 calls per hour
      /*let gists = [
          {
          "id": "8f6af49ffe693c15faca67a7f3bf1a31",
          "html_url": "https://gist.github.com/8f6af49ffe693c15faca67a7f3bf1a31",
          "description": "Test"
          }
      ];*/
      

      // Check if sessionData holds anything, so we don't need to hit the api
      const gists = JSON.parse(sessionStorage.getItem("gists"));
      
      if(gists){
        // make it accessible to x-data
        this.gists = gists;
        console.log('sessionStorage', gists);
        return;
      }
      
      console.log(new leptonParser().parse('[bla] #blub'))
      
      // get gists and parse the description field
      fetch('https://api.github.com/users/marcus-at-localhost/gists')
        .then(response => response.json())
        .then(response => {
          console.log('fetched',response);
          // I could use collect.js to manipulate the response further.
          let gists = response.map((item) => {
            // parser: https://codepen.io/localhorst/pen/ZEbqVZd
            item.parsed = new leptonParser().parse(item.description);
            return item;
          });
        
          this.gists = gists;
          sessionStorage.setItem("gists",JSON.stringify(gists));
          //console.log(this,response)
      });
    }
  };
}
</script> 

scripts

<script src="https://codepen.io/localhorst/pen/ZEbqVZd"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/collect.js/4.25.0/collect.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@2.3.5/dist/alpine.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />