index.html

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsnview/build/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsnview/build/index.css" />
<style type="text/css">
*{box-sizing: border-box; font-family: "Open Sans", Consolas, Georgia, Times, 'Times New Roman', serif;}
body {
  font-size:14px;
  margin:0
  padding:20px;
  background:#ddd;
}
#root {
  padding:20px;
  background:#fff;
  border-radius:7px;
  margin-top:20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
}
ul { list-style: none; border-left: 1px dotted #ddd; }
.open:before {
    content: attr(data-before);
    display: inline-block;
}
.close:after, .close:before, .open:before {
    font-family: arial;
    font-size: 22px;
    margin-right: 7px;
    cursor: pointer;
    color: #888;
}
.fold.open,.fold.close {margin-right: 7px; }
.fold.close:after {
    content: attr(data-after);
    font-size: 30px;
    margin-left: 7px;
}
.len { color: #ddd; }
</style>

<div id="root"></div>
<script type="text/javascript">
let root = document.getElementById('root');
let idToken = null;
let refreshToken = null;
let res = axios.get("https://airot.co/api/v1/authentication?key={--------------your api key -------------}")
.then(res=>{
	if(res.data.success === true){
		idToken = res.data.data.idToken;
		refreshToken = res.data.data.refreshToken;
		return axios.get("https://airot-4g-default-rtdb.asia-southeast1.firebasedatabase.app/NVT4eFojL2fg8kBH8ITXYqmvYkv2.json?auth=" + idToken);
	}else{
		return false;
	}
})
.then(res=>{
	if(res){
		root.appendChild(window.jsnview(res.data, {showLen: true, showType: false, showBrackets: true, showFoldmarker: true}));
	}else{
		root.innerHTML = "Cannot Login";
	}
})
.catch(err=>{
	console.log(err);
});
</script>