vue-axios

Kod za čitanje json-a pomoću axios i vue.js, ovdje treba paziti da na server strani bude omogućeno Access-Control-Allow-Origin pošto se get odvija na client strani


<!DOCTYPE html>
<html>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<body>

    <h2>Axios</h2>

    <div id="app">
        <div>{{status}}</div>
        <hr>
        <div></div>
        <table>
            <tr v-for="x in j">
                <td>{{ x.Name }}</td>
                <td>{{ x.Country }}</td>
            </tr>
        </table>
    </div>

    <script>
        myObject = new Vue({
            el: '#app',
            data: {
                status: '',
                j: null
            },
            created: function () {
                this.loaddata()
            },
            computed: {

            },
            methods: {
                loaddata() {
                    this.status = "loading...";

                    axios.get('https://ron-swanson-quotes.herokuapp.com/v2/quotes')
                        .then(response => {
                            this.status = response.data[0]
                        })
                        .catch(error => {
                            console.log(error);
                        })

                    //table data
                    //https://www.w3schools.com/angular/customers.php
                    axios.get('https://www.w3schools.com/angular/customers.php')
                        .then(response => {
                            this.j = response.data.records;
                        })
                        .catch(error => {
                            console.log(error);
                        })

                }

            }
        });
    </script>

</body>

</html>