極速產生JSON測試資料

JSON是顯學

多年前還在手刻AJAX時,前端後端要進行資料交換還是很辛苦的事。後來發現JSON這個好物,不過那個年代(也不過三年前)不管是瀏覽器或是伺服器端的JSON環境都還不太成熟。現在,JSON已成為顯學,不管是前端應用程式還是後端伺服器應用程式都已大大支持JSON格式。JSON格式的好,用過都知道。如果在開發階段要準備JSON資料,嗯,就不是那麼好玩了。今天就是要介紹一套起方便的網頁工具,讓我們可以極速來產生所需要的JSON測試資料。

JSON Generator

  • 網站:www.json-generator.com
  • 使用說明:定義好所需的JSON格式與內容,即可產生大量的測試假JSON資料。
http://www.json-generator.com/

使用上只有二個地方,一個定義好你要的JSON格式,二是按一下"Generate"。就那麼簡單,沒了。

json-generator的範例

  
[
    '{{repeat(5, 7)}}',
    {
        id: '{{index}}',
        guid: '{{guid}}',
        isActive: '{{bool}}',
        balance: '{{numeric(1000,4000,%=$0,0.00)}}',
        picture: 'http://placehold.it/32x32',
        age: '{{numeric(20,40)}}',
        name: '{{firstName}} {{surname}}',
        gender: '{{gender}}',
        company: '{{company}}',
        email: '{{email}}',
        phone: '+1 {{phone}}',
        address: '{{numeric(100,999)}} {{street}}, {{city}}, {{state}}, {{numeric(100,10000)}}',
        about: '{{lorem(1,paragraphs)}}',
        registered: '{{date(YYYY-MM-ddThh:mm:ss Z)}}',
        latitude: '{{numeric(-90.000001, 90)}}',
        longitude: '{{numeric(-180.000001, 180)}}',
        tags: [
            '{{repeat(7)}}',
            '{{lorem(1)}}'
        ],
        friends: [
            '{{repeat(3)}}',
            {
                id: '{{index}}',
                name: '{{firstName}} {{surname}}'
            }
        ],
        randomArrayItem: function(idx) {
            var choices = ['cherry', 'apple', 'lemon'];
            return choices[this.numeric(0, choices.length - 1)];
        }
    }
]
  
  

各位會發現重點在裡面的{{param}}的定義,英文不錯的,就點擊網頁的Help即有說明。不想看英文的,就往下看吧。^_^

{{param}}參數說明

{{index}}
Integer
回傳目前複製的物件的索引,從1開始。
{{numeric(a, b, format)}}
Integer or Float
可以是負數。產生指定範圍隨機數值從"a"到"b"。如果"a"是float,產生的數值也會是float。產生的數值可以根據"format"字串進行格式化。更多資訊請訪問Numeral.js
{{bool}}
Boolean
隨機產生的true或false。
{{firstName(gender)}}, {{surname}}
String
產生隨機的名(firstName)或姓(surname)。參數"geneder" — 字串包含male或female。
{{gender}}
String
在{{firstName}}呼叫之前產生基於性別(male或female)的值或隨機值。
{{company}}
String
隨機產生公司名稱。
{{phone(mask)}}
String
隨機產生手機號碼。產生的號碼可以根據"mask"字串,其中設定格式的"x"字母將替換為數字。
{{email(random)}}
String
產生Email,基於{{firstName}}、{{surname}}和{{company}}呼叫之前。如果參數"random"是true,會隨機產生Email地址。
{{countriesList}}
Array
回傳205個國家清單。
{{country}}
String。
隨機產生國家。
{{state}}
String
隨機產生US State。
{{city}}
String
隨機產生US city。
{{street}}
String
隨機產生US street。
{{date(format)}}
String
隨機產生日期,可根據"format"字串進行格式化。格式字串可包含任何字元,但要考慮他們之中一些token,並將由適當的日期值替換。
可能的token包含:
  • YYYY: 四位數的年。
  • YY: 最後二位的年。
  • MM: ISO8601相容的月(零填充)。一月(January)是年第一個月。
  • M: 一年之間的月,不進行零填充。
  • dd: 零填充的日。
  • d: 日。
  • hh: 零填充的小時。
  • h: 小時。
  • mm: 零填充的分鐘。
  • m: 分鐘。
  • ss: 零填充的秒。
  • s: 秒。
  • TZ: 相容ISO8601的時區格式(例如:"-04:00"),較長的token優先於較短token。
{{guid}}
String
隨機產生GUID
{{lorem(count, units)}}
String
根據"count"產生Lorem Ipsum。"units"可設定為"words"或"sentences"或"paragraphs"。
  • words:產生一個單字。
  • sentences:產生一句話。
  • paragraphs:產生一個段落。
function(idx) { ... }
Any valid
你可以建立你自己的function,然後回傳任何值。傳遞參數:"idx"(當前複製物件的索引)。"this"關鍵字包含具有相同名稱的標籤產生方法。
{{repeat(n,m)}}
重覆次數,單一參數n為重覆n次。如果是(n,m)是隨機重覆(n-1 to m-1)次,例如,(5,7)表示隨機重覆4~6次。
http://www.json-generator.com/ 附加功能

產生JSON測試資料之後,http://www.json-generator.com/網站還很貼心的提供以下功能:

  • 點擊"Upload",只要你產生的資料量小於 500kB,它會將你的資料暫存30天並產生一個URL讓你呼叫使用。此URL支持JSONP。例如:http://www.json-generator.com/j/bUAFShmkbS?indent=4(2014/1/14產生)。
  • 點擊"Copy to clipboard",可快速複製JSON資料至本機,一般是儲存為*.json。
  • 點擊"* space tab",可自定JSON資料排版的方式。
  • http://www.json-generator.com/會將你最後一次產生的範本儲存至localStorage,如要取消,只需要按一下畫面上的Reset即可。

2 則留言:

  1. 好文章!! 但是不知為啥upload之後我按Copy URL都始終沒有反應呢...

    回覆刪除
    回覆
    1. 我記得它有改版,要不換 http://beta.json-generator.com 試試。

      刪除

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。