JSFiddle - React, Tailwind, and code Playground

by cyberowl

HTML

<div id="app"><button v-on:click="xhr">XHR</button>
  <br>
  <div v-for="item in data">
    <h3>{{ item.players.now }}:{{ item.id }}</h3>
    <li>{{ item.body }}</li>
  </div></div>

JavaScript

'use strict';
 var config = {
 apiUrl: 'https://mcapi.us/server/status'
 };
 var servers = [{
   address: "play.minesuperior.com",
   port: "", // Optional
   name: "play.minesuperior.com",
 }, {
   address: "mineverse.com",
   name: "Mineverse",
 }, {
   address: "mc.hypixel.net",
   name: "Hypixel",
 }, {
   address: "128.0.0.1s",
   port: "25567",
   name: "Error test",
 }];
 
 var app = new Vue({
   el: '#app',
   data: {
     data: []
   },
   methods: {
     xhr: function() {
       var rq = new XMLHttpRequest();
       rq.responseType = 'json';
       rq.onreadystatechange = function(vm) {
         if (this.readyState === XMLHttpRequest.DONE) {
           if (this.status === 200) {
             vm.data = this.response;
           } else {
             vm.data = "Fail";
           }
         }
       }
			 var srvUrl = config.apiUrl + '?ip=' + server.address + (server.port ? '&port=' + server.port : '');
       rq.open("GET", srvUrl);
       rq.send();
       });
   },
   mounted: function() {
     this.xhr();
   }
 }
});