Abari Tournament

by Justin M

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="el" class="table">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Points</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="player in players">
      <td>{{ player.position }}</td>
      <td>{{ player.points }}</td>
      <td>{{ player.name }}</td>
    </tr>
  </tbody>
</table>

JavaScript

var vm = new Vue({
  el: '#el',
  created () {
  	this.status = "Requesting..."
  	var xhr = new XMLHttpRequest()
    
    xhr.onreadystatechange = function(vm) {
      if (this.readyState === XMLHttpRequest.DONE) {
        if (this.status === 200) {
          vm.players = JSON.parse(this.responseText);
          vm.status = "Done."
        } else {
          vm.status = "Request Failed";
        }
      }
    }.bind(xhr, this)
    
    xhr.open("GET", 'https://matchplay.events/api-beta/tournaments/0nbw/standings');
    xhr.send();
  },
  data () {
  	return {
    	status: '',
    	players: []
    }
  }
})