JSFiddle - React, Tailwind, and code Playground

by nevkatz

HTML

<div id="root">

</div>

JavaScript

let utils = {};

(function(context) {
  
    // now we make a promise-based get request.
    context.get = (url) => {
    
       return new Promise(function(resolve,reject){
         
        // XMLHttpRequest();
        var req = new XMLHttpRequest();
        
        req.open('GET',url);
        req.onload = function() {
        // handle both remote 200 responses and local zero responses...
        if (req.status == 200)  {
          resolve(req.response);
        }
        else {
        reject(Error('promise error with ' + req.status));
       }
     };
     req.onerror = function(err) {
       reject(Error('Network Error with '+url+': ' + err));
     };
     // optional
     req.onreadystatechange = function(m) {
     };
     req.send();
   }); // end the promise wrapper
  } // end the get request
  
  // now let's parse the JSON.
  context.getJSON = async function(url) {
  
    var data = {};
  
    var string = null;
    try {
     string = await context.get(url);
    }
    catch (e) {
      alert('error: ' + e);
    }
    // parse the JSON.
    try { 
      data = JSON.parse(string);
      success = true;
    }
    catch (e) {
     alert('parse error. ' + e);
    }
    return data;
  }  
})(utils);

function myFuncForEach(filepaths) {
  
  let root = document.querySelector('#root');
  
  root.innerHTML += '<h4>forEach example:</h4>'
  
  filepaths.forEach(function(filepath) {
   
      utils.getJSON(filepath).then(function(data) {
        
          root.innerHTML += `<p>for...each: ${data.length}</p>`;
          
          return 0;
      });
  });

}
async function myFuncAwait(filepaths) {
  let root = document.querySelector('#root');
  
  root.innerHTML += '<h4>Async / Await Example';
  
  for (var filepath of filepaths) {
      let data = await utils.getJSON(filepath);
     	
      try {
              root.innerHTML += `<p>for...of: ${data.length}</p>`;
      }
      catch (e) {
      console.log('error: ' + e);
      }

  }
}

let paths =...