Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
    <meta name="description" content="[VUEJS - Looping through SharePoint list retrieved through Axios]">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
​
<body>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    
    <body>
        <div id="app">
            
            <table border=1>
                <tr>
                    <th>Name</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone</th>
                </tr>
                <tr v-for="user in users">
                    <td>{{user.name}}</td>
                    <td>{{user.username}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.phone}}</td>
                </tr>
                
            </table>
        </div>
        
        <script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
        <script>
            new Vue({
                el: "#app",
                data: {
                    users: []
                },
                created: function () {
                    this.getListData();
                },
                methods: {
                    getListData: function () {
                        var root = 'https://jsonplaceholder.typicode.com';
                        var vm = this;
​
                        $.ajax({
                            url: root + '/users',
                            method: 'GET'
                        }).then(function (data) {
                            vm.users = data;
                        });                                            
                        
                    },
                    generateData: function (d) {
                        //this.data = d;
                        //alert("generateData");
                    }
                }
            });     
        </script>
        
        
    </body>
    
    </html>
    
</body>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
isogunropro
0viewers