1Marc/display-chat-json.html

## display-chat-json.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chat</title>
  <link rel="stylesheet" href="normalize.css">
</head>
<body>
<style>
td {
  padding: 5px;
  background: white: ;
  border-bottom: 4px solid #eee;
}
</style>
<script>
/* autolink text */
(function(){var h=[].slice;String.prototype.autoLink=function(){var b,f,d,a,e,g;a=1<=arguments.length?h.call(arguments,0):[];e=/(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;if(!(0<a.length))return this.replace(e,"$1<a href='$2'>$2</a>");d=a[0];f=function(){var c;c=[];for(b in d)g=d[b],"callback"!==b&&c.push(" "+b+"='"+g+"'");return c}().join("");return this.replace(e,function(c,b,a){c=("function"===typeof d.callback?d.callback(a):void 0)||"<a href='"+
a+"'"+f+">"+a+"</a>";return""+b+c})}}).call(this);

  var xhr = new XMLHttpRequest();
  var config = {
    url: 'frontendmasters-introtowebdevday2-export.json'
  };
  xhr.open('GET', config.url, true);
  xhr.send();
  xhr.onreadystatechange = function() {
    if (xhr.status == 200 && xhr.readyState == 4) {
      var data = JSON.parse(xhr.responseText);
      printChat(data);
    }
  }

  function printChat(data) {
    var out = '';
    for (id in data) {
      var msg = data[id];
      if (msg.text) {
        out += '<tr><td>' + msg.name.replace(' ', '&nbsp;') + '</td><td>' + msg.text.autoLink() + '</td></tr>'
      }
    }
    document.getElementById('chat').innerHTML = out;
  }
</script>
<table cellpadding="0" cellspacing="0" border="0" id="chat"></table>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Chat</title>
	<link rel="stylesheet" href="normalize.css">
	</head>
	<body>
	<style>
	td {
	padding: 5px;
	background: white: ;
	border-bottom: 4px solid #eee;
	}
	</style>
	<script>
	/* autolink text */
	(function(){var h=[].slice;String.prototype.autoLink=function(){var b,f,d,a,e,g;a=1<=arguments.length?h.call(arguments,0):[];e=/(^\|[\s\n]\|<br\/?>)((?:https?\|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_\|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_\|])/gi;if(!(0<a.length))return this.replace(e,"$1<a href='$2'>$2</a>");d=a[0];f=function(){var c;c=[];for(b in d)g=d[b],"callback"!==b&&c.push(" "+b+"='"+g+"'");return c}().join("");return this.replace(e,function(c,b,a){c=("function"===typeof d.callback?d.callback(a):void 0)\|\|"<a href='"+
	a+"'"+f+">"+a+"</a>";return""+b+c})}}).call(this);

	var xhr = new XMLHttpRequest();
	var config = {
	url: 'frontendmasters-introtowebdevday2-export.json'
	};
	xhr.open('GET', config.url, true);
	xhr.send();
	xhr.onreadystatechange = function() {
	if (xhr.status == 200 && xhr.readyState == 4) {
	var data = JSON.parse(xhr.responseText);
	printChat(data);
	}
	}

	function printChat(data) {
	var out = '';
	for (id in data) {
	var msg = data[id];
	if (msg.text) {
	out += '<tr><td>' + msg.name.replace(' ', ' ') + '</td><td>' + msg.text.autoLink() + '</td></tr>'
	}
	}
	document.getElementById('chat').innerHTML = out;
	}
	</script>
	<table cellpadding="0" cellspacing="0" border="0" id="chat"></table>
	</body>
	</html>