標籤: JSON

利用FooTable列出可分頁、搜尋、排序的資料檢視

這個工具是 Table view, FooTable:

https://fooplugins.github.io/FooTable/

很適合快速地將資料利用 table 的方式呈現出來, 這個工具的特點是同時可以分頁、搜尋、排序與編輯, 尤其在 mobile view (responsive) 時, 可以摺疊內容, 不用橫向捲動, 十分方便.

這裡將利用財金公司的國內銀行分行代碼表來進行示範, 原始資料在這裡:

https://www.fisc.com.tw/TC/Service?CAID=51254999-5d15-4ddf-8e54-4b2cdb2a8399

其中的”下載完整對照表”, “台幣匯款”, 可以下載完整的國內銀行總分支機構代碼(7碼)與名稱, 連結如下:

https://www.fisc.com.tw/tc/download/twd.txt

內容如上, 純文字檔, 不過請注意右下角的 Big5 編碼, 若要實作為 web 程式碼, 需要轉換為 UTF-8 (下面的程式碼使用 mb_convert_encoding 進行轉換).

接下來利用 FooTable 進行實作囉, 基礎程式碼如下:

$(document).ready(function() {
  $('.table').footable({
    "paging": {
      "enabled": true,
    },
    "filtering": {
      "enabled": true
    },
    "sorting": {
      "enabled": true
    },
    "columns": [{
        "name": "id",
        "title": "id"
      },
      {
        "name": "branch",
        "title": "branch",
        "breakpoints": "xs"
      },
      {
        "name": "abbr",
        "title": "abbr"
      }
    ],
    "rows": $.get("twd.php"),
  });
});

簡單說明, paging, filtering, sorting 要設為 true, 而 columns 有三欄, 所以分別給定對應的欄位名(name)與欄位顯示(title), 其中 branch 有多加了 breakpoints: xs 代表著在 xs 時要摺疊, 也就是小畫面時, 會將此欄位收納起來. 而 rows 則為實際的資料, 這裡簡單使用一支 php 程式進行, 程式碼如下:

閱讀全文

標籤 BIG5, data, FooTable, Javascript, JSON, table, utf-8, View

ISO3166 ALPHA2對照

文章作者作者: tim
文章發佈日期 2021-11-30
在〈ISO3166 ALPHA2對照〉中尚無留言

ISO 3166 是國家/地區的代碼, 其中 ALPHA-2 為兩碼國家代碼, 可以由 wikipedia 這裡整理好的資料查得:

https://zh.wikipedia.org/wiki/ISO_3166-1%E4%BA%8C%E4%BD%8D%E5%AD%97%E6%AF%8D%E4%BB%A3%E7%A0%81

將 table 轉成 csv, 再利用 csv to json (https://csvjson.com/csv2json)轉出即可.

利用了兩碼英文字元的國家/地區代碼, 取得對照的中文名稱, 內容如下:

閱讀全文

標籤 ISO 3166, Javascript, JSON

[WordPress]快速匯入JSON/CSV/XML內容至wordpress

文章作者作者: tim
文章發佈日期 2020-12-20
在〈[WordPress]快速匯入JSON/CSV/XML內容至wordpress〉中尚無留言

這裡要介紹的是快速將 JSON/CSV/XML檔案的內容至 wordpress 裡的方法, 介紹使用工具為:

https://wordpress.org/plugins/wp-all-import/

雖然沒有 JSON 檔案格式, 不過可以利用這個線上工具進行:

閱讀全文

標籤 automation, csv, import, JSON, wordpress, XML

[json]如何讀取含有減號的json key

剛在撰寫程式碼時, 發現要取回 aws cloudsearch 中的搜尋使用時間, 其傳回的 json 參數中, 使用了減號, 該鍵值為 time-ms , 其實很直覺地要使用, 但又覺得怪怪的, 一執行馬上就有問題.

因為原來的 jsonObj.time-ms 會被視為 jsonObj.time – ms , 所以必須調整寫法, 正確寫法如下:

jsonObj["time-ms"]

這樣就可以了, 當然, 該回應的 json 中, 該鍵值(key)也必須是使用引號包起來的, 否則該 json 物件也會有問題.

測試程式碼如下:

var a = { 
  "mykey": "value1", 
  "my-key": "value2",
}
alert(a["my-key"]);

會回應 value2 這樣就對了.

參考資料:
http://stackoverflow.com/questions/13869627/unable-to-access-json-property-with-dash

標籤 attributes, dash, Javascript, JSON, minus

在nodejs中發起json post的字元長度問題

在 nodejs 專案中, 若是需要對外發起使用 application/json 的 http post , 若有中文字, 需要注意計算字串長度的問題. 一般發起的程式碼請參考:

http://tech.pro/tutorial/1091/posting-json-data-with-nodejs

不過該範例是使用英文字, 所以沒有問題, 若是要發起中文字的 json http post, 需要調整計算 Content-Length 的方式, 使用 new Buffer(str).length, 如下:

var obj_json = { name: "王大頭", age: 25 };
var json_string = JSON.stringify(obj_json);

var req = http.request({
        host: 'host.example.com',
        port: 80,
        path: '/upload',
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Content-Length': new Buffer(json_string).length
        }
    }, function(res) {
    res.setEncoding('utf-8');
    var responseString = '';
    res.on('data', function(data) {
        responseString += data;
    });
    res.on('end', function() {        
        console.log(responseString);
    });
});

req.on('error', function(e) {
  // http post error
});    

req.write(json_string);
req.end();

參考資料: http://cnodejs.org/topic/50616f5301d0b801482695cf

標籤 Javascript, JSON, nodejs, post

好用JSON Editor

文章作者作者: tim
文章發佈日期 2011-12-30
在〈好用JSON Editor〉中尚無留言

在開發網頁程式, 用到解析和產生 JSON 是經常發生的事, 不過如何快速的解析或是產生 JSON , 又或是用來除錯這些 JSON 的資料, 不像 XML 可以利用瀏覽器來幫忙, JSON 可以利用這個作者 Thomas – http://www.thomasfrank.se/about.html 開發的工具來進行 JSON 的線上測試.

說明在這裡: http://www.thomasfrank.se/json_editor.html
他有線上使用版, 和下載版, 若是進行除錯, 可以直接使用線上版: http://www.thomasfrank.se/downloadableJS/JSONeditor_example.html

以之前文章 https://diary.tw/archives/285 的資料為例:

{ 'obj1': {
  'child1':'value1',
  'child2':'value2'
  },
  'array1': [1, 2, 3, 4, 5]
};

將內容貼到 JSON Editor 裡, 按下 save 鍵, 就會產生出該 JSON 的樹狀結構在該 editor 左側(記得要自己按下 + 號展開, 如下圖:

這樣可以很容易的理解及看出該 JSON 資料的內容. 若是要取得某一節點, 可以點在該節點上, 並看 editor 上的 label及下面的 value 就可以利用程式取出該 JSON 資料結構的資料點, 以上面的 array1 中的 1 為例, 圖示如下:

這樣是不是十分方便, 對於在使用 JSON 的開發上, 有十足的加速作用呢!

標籤 editor, Javascript, JSON

有趣的JSON技術

文章作者作者: tim
文章發佈日期 2006-07-30
在〈有趣的JSON技術〉中尚無留言

寫 javascript 對一般的網頁程式設計人員來說, 應該是家常便飯, 舉凡一些需要在 client side 完成的事, 大多會利用 javascript 來操作, 例如滑鼠經過換色, 或是檢查 form (表單)在送出前的一些資料正確性檢查(ps. 一定要記得在 server side 也要再次檢查, 以確保資料的正確性)或方便使用者輸入的自動更正等功能.

javascript 的功能強大, 又加上高階, 物件化等特性, 使得撰寫 javascript 的程式設計人員十分愛用, 也方便許多在 client side 就可以先完成的一些動作, 再加上最近的 Ajax 風行, javascript 無疑變成十分熱門的語言.

JSON (Javascript Object Notation)相信很多人有聽過, 但也有很多人不知道這個東西, 他是附屬在 javascript 下的一組物件描述方法, 這個網站介紹十分詳細: http://www.json.org/, 有很容易了解的圖示幫助使用者了解 JSON 物件的描述方式.

JSON 是利用了成對的 {} 來包住各物件(object), 用成對的 [] 來包任各陣列(array), 用成對的 “” 來包住各字串, 用逗號來區隔各變數, 而資料型態有 string, number, array, object, 另外有三個常數, true, false, null. 下面描述了一個 object obj1 擁有兩個成員變數, 而另一個為 array 擁有 5 個 number 的範例:

{ 'obj1': {
  'child1':'value1',
  'child2':'value2'
  },
  'array1': [1, 2, 3, 4, 5]
};

閱讀全文

標籤 AJAX, Javascript, JSON, XML

2024 年 4 月
日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30