Skip to content

Instantly share code, notes, and snippets.

@cdsaenz

cdsaenz/index.html

Created August 19, 2022 14:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cdsaenz/394c1dec9610ae6d1567fb50d2baad62 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cdsaenz/394c1dec9610ae6d1567fb50d2baad62 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cdsaenz created this gist Aug 19, 2022.
    48 changes: 48 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine Ajax test</title>
    </head>
    <body>
    <h1>Users API Retrieval Test</h1>

    <div x-data="createDataRetriever()" x-init="getData()">
    USERS LIST
    <ul>
    <template x-for="user in users" :key="user.id">
    <li>
    <span class="" x-text="user.phone"></span>
    </li>
    </template>
    </ul>
    </div>

    <script src="//unpkg.com/alpinejs" defer></script>
    <script>

    /**
    * Alpine instance with data retrieval
    */
    function createDataRetriever() {

    return {
    isLoading: false,
    users: [],
    getData() {
    this.isLoading = true;
    fetch('https://jsonplaceholder.typicode.com/users')
    .then((response) => response.json())
    .then((data) => {
    this.users = data;
    this.isLoading = false;
    });
    }
    }
    }

    </script>
    </body>
    </html>