Fetch Details from json url using js

by Pranab Dey

HTML

<div class="main">

</div>

CSS

.box{
	background: skyblue; padding: 10px 20px; display: inline-block; margin: 5px; margin-right: 0; margin-bottom:0;
	border-radius: 5px;
}
h3,h2{
	display: inline-block; margin: 5px auto;
}

JavaScript

var golu = document.getElementsByClassName("main")[0];
var bar,i;
var jsn = new XMLHttpRequest();
jsn.open("get","https://jsonplaceholder.typicode.com/users",true);
jsn.onload = function(){
bar = JSON.parse(jsn.responseText);
//alert(bar[0].address.geo.lat);
for(i=0;i<=bar.length-1;i++){
var box = document.createElement("div");
box.className = "box";
box.innerHTML = "<h2>" + bar[i].name + "</h2><br>Phone : <a href='tel:" + bar[i].phone + "'/>" + bar[i].phone + "</a><br><h3>website :</h3><a href='http://"+bar[i].website+"' target='_blank'>Visit Website</a><br><iframe src='https://maps.google.com/maps?q="+bar[i].address.geo.lat+"+"+bar[i].address.geo.lng+"&hl=es&amp;output=embed' width='400' height='300' allowfullscreen></iframe>";
	golu.append(box);
}
};
jsn.send();