Last active
January 9, 2017 11:08
-
-
Save ckhung/978f6be39273264bc49b07e41fd787e1 to your computer and use it in GitHub Desktop.
the simplest file-reading example using jquery, plus fancy csv- and json-data display on html page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* global $, document, console */ | |
$(document).ready(function (){ | |
// http://stackoverflow.com/questions/9898813/jquery-wait-till-multiple-get-requests-are-successully-processed | |
var f1 = 'https://raw.githubusercontent.com/g0v/potluckmap/gh-pages/data/shop-clothes.csv'; | |
var f2 = 'https://raw.githubusercontent.com/g0v/potluckmap/gh-pages/data/shop-gift.geojson'; | |
var clothes, gift; | |
clothes = $.get(f1); | |
gift = $.get(f2); | |
$.when(clothes, gift).done(init); | |
}); | |
function init(clothes, gift) { | |
console.log('clothes: ', clothes, ' \ngift', gift); | |
clothes = clothes[0]; | |
gift = gift[0]; | |
$('#pre_display').text( | |
'鹽埕服飾店:\n' + clothes + '\n鹽埕禮品店:\n' + gift | |
); | |
// https://datatables.net/examples/data_sources/js_array.html | |
var cst = []; // clothes shop table | |
clothes = clothes.split('\n'); | |
var header = clothes.shift(); | |
header = header.split(',').map(function (x) { return {title:x}; }); | |
clothes.forEach(function (row) { | |
if (row.length > 1) { | |
cst.push(row.split(',')); | |
} | |
}); | |
// console.log('header: ', header, ' \ncst', cst); | |
$('#table_display').DataTable({ columns: header, data: cst }); | |
var jqTree; | |
jqTree = json2jqTree('鹽埕禮品店', JSON.parse(gift)); | |
// console.log(jqTree); | |
$('#tree_display').tree({ | |
data: [jqTree], | |
autoOpen: true, | |
onCreateLi: function(node, $li) { | |
if ('value' in node) { | |
$li.find('.jqtree-title'). | |
after(': <span class="value">' + node.value + '</span>'); | |
} | |
} | |
}); | |
} | |
function json2jqTree(name, jsdata) { | |
if (jsdata instanceof Array) { | |
return { | |
name: name, | |
children: jsdata.map(function (x,i) { | |
return json2jqTree('['+i+']',x); | |
}) | |
}; | |
} else if (typeof jsdata == 'object') { | |
return { | |
name: name, | |
children: Object.keys(jsdata).map(function (x) { | |
return json2jqTree(x, jsdata[x]); | |
}) | |
}; | |
} else { | |
return { | |
name: name, | |
value: jsdata | |
}; | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
<head> | |
<link type="text/css" rel= "stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" /> | |
<link type="text/css" rel= "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqtree/1.3.3/jqtree.min.css" /> | |
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> | |
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqtree/1.3.3/tree.jquery.min.js"></script> | |
<script src="readfile-jq.js"></script> | |
<style type="text/css"> | |
/*<![CDATA[*/ | |
span.value { color: blue; } | |
/*]]>*/ | |
</style> | |
<title>javascript 簡單讀檔測試</title> | |
</head> | |
<body> | |
<h1>javascript 簡單讀檔測試</h1> | |
<h2>一、 未排版原始資料</h2> | |
<pre id="pre_display"> | |
</pre> | |
<h2>二、 以表格呈現 .csv/二維陣列</h2> | |
<table id="table_display" class="display"> | |
</table> | |
<h2>三、 以樹狀結構呈現 .json</h2> | |
<div id="tree_display"> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
詳見:用 jQuery 無痛讀檔、顯示 以及 javascript Can Read Local Files