JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "https://emma.pixnet.cc/mainpage/blog/categories/hot/28?page=1&per_page=10&api_version=2&format=json";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var data = arr.articles;
var out = "";
var i;
for (i = 0; i < data.length; i++) {
if ( data[i].thumb != "" ) out += '<img src="' + data[i].thumb + '" />';
if ( data[i].title != "" ) out += '<p><a href="' + data[i].link + '" target="_blank">' + data[i].title + '</a></p>';
if ( data[i].address != undefined ) out += '<p><a href="https://www.google.com.tw/maps?daddr=' + data[i].address + '" target="_blank">' + data[i].address + '</a></p>';
out += '<p> </p>';
out += '<br /><br /><br />';
}
document.getElementById("pixnet-stuff").innerHTML = out;
}
</script>
</head>
<body>
<div id="pixnet-stuff">
</div>
</body>
</html>