dump_reader.html

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 File API</title>
        <meta charset="UTF-8" />
		<style>
			body {
				font-family: helvetica, sans-serif;
			}
			
			tbody {
				font-family: courier new, monospaced;
			}
			tr:nth-child(even) {
				background-color: #def
			}
		</style>
    </head>
    <body>
        <input type="file" onchange="loadFile(this)"/>
        <table>
			<thead>
				<tr>
					<th>Key</th>
					<th>Value</th>
				</tr>
			</thead>
			<tbody id="results">
			</tbody>
		</table>
		
		
		<script>

function loadFile(input) {
    var file = input.files[0]
    console.log(file)
 
    var fileReader = new FileReader();
    fileReader.onload = function(e) {
        var output = ''
		document.getElementById('results').innerHTML = output
		
		var text = e.target.result
		var lines = text.split('\n')
		
		for(var i in lines) { 
			var line = lines[i]
			if( !line || line[0] == '#' )
				continue
			var tokens = line.split('\t')
			var key = JSON.parse( tokens[0] )
			var val = JSON.parse( tokens[1] )
			output += '<tr><td>' + key + '</td><td>' + val + '</td></tr>'
				
			if( i > 100 )
				break
		}
		document.getElementById('results').innerHTML = output
		//document.getElementById('output').innerHTML = JSON.stringify(items,null,2)
    };
    fileReader.onerror = function(e) {
        console.log(e.target.error.name);
    };
    fileReader.onprogress = function(e) {
        console.log(e.loaded, e.total);
    };
    fileReader.readAsText(file);
}

 

</script>
    </body>
</html>