checketts/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input value="BMW" disabled><br/>
  <button id="myBtn">Get Records</button>
  <div id="output1"></div>
</body>
  <script>
    var init = function(event){
      document.getElementById("myBtn").addEventListener('click', GetRecords);
    }

    function GetRecords(event){
          event.preventDefault();
      var m_sUserID = "secret user";

    var out = document.getElementById("output1");
    out.innerHTML = "";
    var xhtmlreq= new XMLHttpRequest();
    xhtmlreq.open("GET","https://blistering-fire-7540.firebaseio.com/" + m_sUserID + ".json");

    xhtmlreq.send(null);
    xhtmlreq.onreadystatechange = function(){
        if(xhtmlreq.readyState == 4 && xhtmlreq.status == 200){
            console.log(xhtmlreq.responseText, xhtmlreq.responseType, xhtmlreq.responseXML);
            var data = JSON.parse(xhtmlreq.responseText);
            if(typeof(data) !== "undefined" && data !== null){
                // data is an Object type.  The keys is an inherited function of Object that returns an array of keys to that object.
                // we can do a forEach on the data object this way to get the parts and pieces we need for the app.
                Object.keys(data).forEach(function (key, index) {
                    //Iterating over "BMW" the highest level entry
                    console.log('Outer',key,data[key]);

                    Object.keys(data[key]).forEach(function (key1, index1){
                        console.log("inner loop key: ", key1, "  index:", index1);
                        var item = document.createElement("div");
                        out.appendChild(item);


                        item.textContent = "key: " + key1 + "  index: "+ index1 + "   principal: " + data[key][key1].principal + "   rate: " + data[key][key1].rate + " :: " + data[key][key1].loantype;
                    });
                });
            }
        }
    }

    }
    document.addEventListener("DOMContentLoaded",init);

  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<input value="BMW" disabled><br/>
	<button id="myBtn">Get Records</button>
	<div id="output1"></div>
	</body>
	<script>
	var init = function(event){
	document.getElementById("myBtn").addEventListener('click', GetRecords);
	}

	function GetRecords(event){
	event.preventDefault();
	var m_sUserID = "secret user";

	var out = document.getElementById("output1");
	out.innerHTML = "";
	var xhtmlreq= new XMLHttpRequest();
	xhtmlreq.open("GET","https://blistering-fire-7540.firebaseio.com/" + m_sUserID + ".json");

	xhtmlreq.send(null);
	xhtmlreq.onreadystatechange = function(){
	if(xhtmlreq.readyState == 4 && xhtmlreq.status == 200){
	console.log(xhtmlreq.responseText, xhtmlreq.responseType, xhtmlreq.responseXML);
	var data = JSON.parse(xhtmlreq.responseText);
	if(typeof(data) !== "undefined" && data !== null){
	// data is an Object type. The keys is an inherited function of Object that returns an array of keys to that object.
	// we can do a forEach on the data object this way to get the parts and pieces we need for the app.
	Object.keys(data).forEach(function (key, index) {
	//Iterating over "BMW" the highest level entry
	console.log('Outer',key,data[key]);

	Object.keys(data[key]).forEach(function (key1, index1){
	console.log("inner loop key: ", key1, " index:", index1);
	var item = document.createElement("div");
	out.appendChild(item);


	item.textContent = "key: " + key1 + " index: "+ index1 + " principal: " + data[key][key1].principal + " rate: " + data[key][key1].rate + " :: " + data[key][key1].loantype;
	});
	});
	}
	}
	}

	}
	document.addEventListener("DOMContentLoaded",init);

	</script>
	</html>