<!DOCTYPE html>
< html >
< head >
< title > Parse jQuery Plugin< / title >
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" > < / script >
< script src = "jquery.parse.js" > < / script >
< style >
body {
font-family: sans-serif;
}
textarea,
#delim {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 14px/1.5em 'Monaco', monospace;
outline: none;
}
textarea {
width: 100%;
padding: 10px;
height: 260px;
}
#delim {
width: 80px;
}
#tabdelim {
font-size: 12px;
}
.container {
width: 100%;
}
.text-center {
text-align: center;
}
code {
white-space: pre;
font: 12px/1.25em 'Monaco', monospace;
background: #EEE;
display: block;
padding: 5px;
}
label {
white-space: nowrap;
}
button {
font-size: 18px;
padding: 10px 40px;
}
< / style >
< / head >
< body >
< div class = "container" >
< div class = "text-center" >
Delimiter: < input type = "text" id = "delim" value = "" maxlength = "1" placeholder = "auto" > < a href = "javascript:" id = "tabdelim" > (Tab)< / a >
< br >
< label > < input type = "checkbox" id = "header" checked > Header row< / label >
< label > < input type = "checkbox" id = "dyntype" checked > Dynamic typing< / label >
< label > < input type = "checkbox" id = "stream" > Stream results< / label >
< / div >
< br >
< textarea id = "tb" placeholder = "CSV input" > Address,City,State,Zipcode,Name,Phone Number,Group,URL
1 Crossgates Mall Road,Albany,NY,12203,Apple Store Cross Gates,(518) 869-3192,"Example ""Group"" 1",http://www.apple.com/retail/crossgates/
Duke Rd & Walden Ave,Buffalo,NY,14225,Apple Store Walden Galleria,(716) 685-2762,Example Group 2,http://www.apple.com/retail/walden/
630 Old Country Rd.,Garden City,NY,11530,Apple Store Roosevelt Field,(516) 248-3347,Example Group 3,http://www.apple.com/retail/rooseveltfield/
160 Walt Whitman Rd.,Huntington Station,NY,11746,Apple Store Walt Whitman,(631) 425-1563,Example Group 3,http://www.apple.com/retail/waltwhitman/
9553 Carousel Center Drive,Syracuse,NY,13290,Apple Store Carousel,(315) 422-8484,Example Group 2,http://www.apple.com/retail/carousel/
2655 Richmond Ave,Staten Island,NY,10314,Apple Store Staten Island,(718) 477-4180,Example Group 1,http://www.apple.com/retail/statenisland/
7979 Victor Road,Victor,NY,14564,Apple Store Eastview,(585) 421-3030,Example Group 1,http://www.apple.com/retail/eastview/
1591 Palisades Center Drive,West Nyack,NY,10994,Apple Store Palisades,(845) 353-6756,Example Group 2,http://www.apple.com/retail/palisades/
125 Westchester Ave.,White Plains,NY,10601,Apple Store The Westchester,(914) 428-1877,Example Group 3,http://www.apple.com/retail/thewestchester/
103 Prince Street,New York,NY,10012,Apple Store SoHo,(212) 226-3126,Example Group 2,http://www.apple.com/retail/soho/< / textarea >
< br >
< div class = "text-center" >
< button id = "parseText" > Parse Text< / button >
< br > < hr >
or
< br > < hr >
< input type = "file" id = "fileinput1" multiple >
< input type = "file" id = "fileinput2" multiple >
< br > < br >
< button id = "parseFiles" > Parse File(s)< / button >
< / div >
< br > < br >
< code id = "output" > < / code >
< / div >
< script >
$(function()
{
var rowCount = 0, queued = 0;
var bigParse = 5243000; // 10 MB
var bigRender = 1024 * 10; // 10 KB
// Note: when streaming from a large file, I'm able to get about 1 million rows every 1.8s
$('#parseText').click(function()
{
rowCount = 0;
$('#parseFiles').prop('disabled', true);
if (is('stream'))
console.log("Now parsing input (not showing progress for massive performance boost)...");
// TODO: Build in some performance logging?
var start = performance.now();
var results = $.parse($('#tb').val(), userConfig());
var end = performance.now();
console.log(Math.round(end - start) + " ms to parse input text");
if (!is('stream'))
render(results);
else
{
console.log("Rows parsed:", rowCount);
render({"message": "Results were streamed and were not aggregated in order to save memory. See console for row count."});
}
$('#parseFiles').prop('disabled', false);
});
$('#parseFiles').click(function()
{
rowCount = 0, queued = 0;
var start = performance.now();
$('#fileinput1, #fileinput2').parse(
{
before: function(file, inputElem)
{
console.log("BEFORE", file, inputElem);
if (file.size & & file.size > bigParse & & !is('stream'))
{
if (!confirm("WARNING - " + file.name + " is a large file, but you chose not to stream the results. This could make your browser tab lock up. Continue?"))
return false;
}
queued++;
$('#parseFiles').prop('disabled', true);
if (is('stream'))
console.log("File is being parsed and the results are being streamed... (not showing progress for massive performance boost)");
},
error: function(err, file, elem)
{
console.log("ERROR", err, file, elem);
if (err.name != "NoFileError")
queued--;
if (queued == 0 || err.name == "AbortError")
$('#parseFiles').prop('disabled', false);
},
complete: function(data, file, inputElem, event)
{
var end = performance.now();
console.log("COMPLETE", file.size < bigRender ? data : " ( too big to render data here or file was streamed ) " , file , inputElem , event ) ;
console.log(Math.round(end - start) + " ms to parse file");
queued--;
if (file.size & & file.size < bigRender & & ! is ( ' stream ' ) )
render(data);
else
render({"message": "File was streamed or is too big to render here; open Developer Tools to see the console output instead"});
if (queued == 0)
$('#parseFiles').prop('disabled', false);
if (is('stream'))
console.log("Rows parsed:", rowCount);
},
config: userConfig()
});
});
$('#tabdelim').click(function()
{
$('#delim').val("\t");
});
function userConfig()
{
return {
delimiter: $("#delim").val(),
header: is('header'),
dynamicTyping: is('dyntype'),
stream: is('stream') ? function(results) { rowCount++; } : false
};
}
function is(checkboxId)
{
return $('#'+checkboxId).is(':checked');
}
function render(results)
{
$('#output').text(JSON.stringify(results, undefined, 2));
}
});
< / script >
< / body >
< / html >
