marknorgren/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;
}

tr:nth-child(even) {
  background-color: red;
}


tr:nth-child(odd) {
  background-color: white;
}
</style>
<script>
/* autolink text */
(function() {
  var autoLink,
    __slice = [].slice;

  autoLink = function() {
    var k, linkAttributes, option, options, pattern, v;
    options = 1 <= arguments.length ? __slice.call(arguments, 0) : [];

    pattern = /(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
    if (!(options.length > 0)) {
      return this.replace(pattern, "$1<a href='$2'>$2</a>");
    }
    option = options[0];
    linkAttributes = ((function() {
      var _results;
      _results = [];
      for (k in option) {
        v = option[k];
        if (k !== 'callback') {
          _results.push(" " + k + "='" + v + "'");
        }
      }
      return _results;
    })()).join('');
    return this.replace(pattern, function(match, space, url) {
      var link;
      link = (typeof option.callback === "function" ? option.callback(url) : void 0) || ("<a href='" + url + "'" + linkAttributes + ">" + url + "</a>");
      return "" + space + link;
    });
  };

  String.prototype['autoLink'] = autoLink;

}).call(this);

  var xhr = new XMLHttpRequest();
  var config = {
    url: 'export.json'
  };
  console.log("GET config.url: " + config.url);
  xhr.open('GET', config.url, true);
  xhr.send();
  xhr.onreadystatechange = function() {
    console.log("xhr status: " + xhr.status);
    if (xhr.status == 200 && xhr.readyState == 4) {
      var data = JSON.parse(xhr.responseText);
      console.log("call printChat.");
      printChat(data);
    } else {
      console.log("Error - data: " + 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;
	}

	tr:nth-child(even) {
	background-color: red;
	}


	tr:nth-child(odd) {
	background-color: white;
	}
	</style>
	<script>
	/* autolink text */
	(function() {
	var autoLink,
	__slice = [].slice;

	autoLink = function() {
	var k, linkAttributes, option, options, pattern, v;
	options = 1 <= arguments.length ? __slice.call(arguments, 0) : [];

	pattern = /(^\|[\s\n]\|<br\/?>)((?:https?\|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_\|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_\|])/gi;
	if (!(options.length > 0)) {
	return this.replace(pattern, "$1<a href='$2'>$2</a>");
	}
	option = options[0];
	linkAttributes = ((function() {
	var _results;
	_results = [];
	for (k in option) {
	v = option[k];
	if (k !== 'callback') {
	_results.push(" " + k + "='" + v + "'");
	}
	}
	return _results;
	})()).join('');
	return this.replace(pattern, function(match, space, url) {
	var link;
	link = (typeof option.callback === "function" ? option.callback(url) : void 0) \|\| ("<a href='" + url + "'" + linkAttributes + ">" + url + "</a>");
	return "" + space + link;
	});
	};

	String.prototype['autoLink'] = autoLink;

	}).call(this);

	var xhr = new XMLHttpRequest();
	var config = {
	url: 'export.json'
	};
	console.log("GET config.url: " + config.url);
	xhr.open('GET', config.url, true);
	xhr.send();
	xhr.onreadystatechange = function() {
	console.log("xhr status: " + xhr.status);
	if (xhr.status == 200 && xhr.readyState == 4) {
	var data = JSON.parse(xhr.responseText);
	console.log("call printChat.");
	printChat(data);
	} else {
	console.log("Error - data: " + 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>