JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

<div id="myDiv">

</div>

CSS

ul{
  background: lime;
}

p{
  background: cyan;
}

JavaScript

function getFromAPI(url, callback){
  var obj;
  fetch(url)
    .then(res => res.json())
    .then(data => obj = data)
    .then(() => callback(obj))
 }
 
getFromAPI('https://jsonplaceholder.typicode.com/posts', getData);

function getData(arrOfObjs){
  var results = "";
  arrOfObjs.forEach( (x) => {
    results += "<p> Id: " + x.id + "<ul>"
  	Object.keys(x).forEach( (p) => {
    	results += "<li>" + (p + ": " + x[p]) + "</li>";
    });
    results += "</ul> </p> <hr>"
  })
  results += "";
  document.getElementById("myDiv").innerHTML = arrOfObjs;
}