ckhung/readfile-jq.js

## readfile-jq.js
/* 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
	};
    }
}


## readfile.html
<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>
	/* 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
	};
	}
	}
	<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>