要美觀的 JSON 排列,大概是因為看 API 或者是 Debug 時才會用上。
### JSON
JSON 全名是 JavaScript Object Notation,也就是我們可以使用 JSON 的格式來使用文字的方式定義一個 Object 有什麽。
以下是一條隨機生成的 JSON 字串 :
```json
[{"id":"5e18484f4e25d29c4c67233f","index":0,"guid":"29c564e9-138c-4cfe-9504-b0e84c9561f3","isActive":false,"balance":"$1,900.03","picture":"http://placehold.it/32x32","age":32,"eyeColor":"brown","name":"Erma Butler","gender":"female","company":"KNOWLYSIS","email":"ermabutler@knowlysis.com","phone":"+1 (959) 489-2209","address":"566 Gold Street, Cherokee, District Of Columbia, 3647","about":"Quis enim sunt cupidatat et fugiat enim id incididunt consectetur in. Consectetur dolore pariatur elit ullamco veniam. Exercitation fugiat elit ex fugiat. Aute ad nisi aute cupidatat.\r\n","registered":"2016-02-07T01:22:26 -08:00","latitude":79.400117,"longitude":81.521948,"tags":["consectetur","laboris","irure","in","sit","ad","nisi"],"friends":[{"id":0,"name":"Golden Small"},{"id":1,"name":"Felicia Gilmore"},{"id":2,"name":"Frankie Curry"}],"greeting":"Hello, Erma Butler! You have 5 unread messages.","favoriteFruit":"apple"}]
```
下面這條 JSON 內容和上面是完全一樣的,不過就使用特定方法排列好 :
```json
[
{
"id": "5e18484f4e25d29c4c67233f",
"index": 0,
"guid": "29c564e9-138c-4cfe-9504-b0e84c9561f3",
"isActive": false,
"balance": "$1,900.03",
"picture": "http://placehold.it/32x32",
"age": 32,
"eyeColor": "brown",
"name": "Erma Butler",
"gender": "female",
"company": "KNOWLYSIS",
"email": "ermabutler@knowlysis.com",
"phone": "+1 (959) 489-2209",
"address": "566 Gold Street, Cherokee, District Of Columbia, 3647",
"about": "Quis enim sunt cupidatat et fugiat enim id incididunt consectetur in. Consectetur dolore pariatur elit ullamco veniam. Exercitation fugiat elit ex fugiat. Aute ad nisi aute cupidatat.\r\n",
"registered": "2016-02-07T01:22:26 -08:00",
"latitude": 79.400117,
"longitude": 81.521948,
"tags": [
"consectetur",
"laboris",
"irure",
"in",
"sit",
"ad",
"nisi"
],
"friends": [
{
"id": 0,
"name": "Golden Small"
},
{
"id": 1,
"name": "Felicia Gilmore"
},
{
"id": 2,
"name": "Frankie Curry"
}
],
"greeting": "Hello, Erma Butler! You have 5 unread messages.",
"favoriteFruit": "apple"
}
]
```
可讀性立即增加上 N 倍了 !!!!
### JSON.stringify()
如果是 JS 的関發者相信對 `JSON.stringify()` 也應該不會佰生,要把 Object 或是 Array 變成為 JSON 字串最正統就是用這個方法。原來我們只要在後面加入多兩個參數就可以把 JSON 輸出為已 Format 版本 !!
```js
// data
var data = {
name: 'foo',
pass: 'bar'
};
// data to json string
var jsonString = JSON.stringify(data, null, 4);
// print json string
console.log(jsonString);
```
就會有以下輸出 :
```js
// output
{
name: 'foo',
pass: 'bar'
}
```
> 在 PHP 上也有類似的動作可以把 JSON 對齊好 : https://19site.net/posts/80