[JavaScript] 將 CSV 檔案轉換成 JSON 資料

我們在拿到客戶提供的資料的時候常常會拿到 excel 檔案(這算幸福的)
至少我們可以簡單的利用一些軟體轉成 csv丟進資料庫裡處理。如果搭配個後端 API 基本上資料都不會是太大的問題可以做成 JSON 供 JavaScript 使用,但是如果在沒有後端或是資料庫的環境中呢?


首先我們先把 csv 檔案放到 server上 利用 $.get() 取得內容,接著將內容String 丟進我們待會會用到的 csvJSON 外掛 function 中。就會取得 JSON
但是這個時候的 JSON 還是 String 的形態所以還無法被解析,我們再加個 JSON.parse() 就可以拿到整個 JSON 物件摟!


function 來源:
https://gist.github.com/iwek/7154578

jQuery 製作下拉選單

這個其實是一套常用到的選單如下

 

這支程式的原理是先用html建立一個會全部顯示的主選單及子選單,
用css設定子選單預設關閉當主選單被滑鼠移入時就會觸發顯示的動作。
顯示的同時將依照主選單的座標來控制子選單的位置。
 
html 部分:
<div id=\"main_link\"> <div class=\"main\" id=\"a\">主選單1 <p class=\"sub\">sub1<br/>sub1</p> </div> <div class=\"main\" id=\"b\">主選單2 <p class=\"sub\">sub2<br/>sub2</p> </div> </div> <div id=\"con\">內容</div>
 
jQuery部分

<script type=\"text/javascript\"> $(function(){ $(\".main\").mouseenter(function(){ var position = $(this).offset(); var x = position.left; var y = position.buttom ; $(\".sub\",this).slideDown(); $(\".sub\").css(\"left\",x); $(\".sub\").css(\"top\",y); }); $(\".main\").mouseleave(function(){ $(\"p\",this).hide(); }); }); </script>
 
CSS部分

body{ margin:0px; padding:0px; } #main_link{ heigh:32px; line-height:32px; margin:20px; } .main{ ackground:#cccccc; heigh:32px; line-height:32px; float:left; margin:0px; padding:0px; } .sub{ background:#dfdfdf; position:absolute; left:0px; #top:52px; z-index:1; margin:0px; padding:0px; display:none; } #con{ margin:0px; padding:0px; clear:both; }

留言

這個網誌中的熱門文章

利用 google MAP API 取得座標之間的距離

JavaScript 將 Array 和 Object 轉成 JSON

讓 PHP 接收 post 的 json 資料