1月 10, 2020 Javascript
要美觀的 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
過去文章
2025 (9)
4 (5)
3 (1)
2 (3)
2024 (25)
11 (3)
10 (3)
9 (1)
3 (18)
2022 (6)
10 (1)
6 (2)
5 (1)
3 (1)
1 (1)
2021 (21)
11 (7)
7 (1)
6 (2)
5 (2)
4 (6)
3 (2)
2 (1)
2020 (92)
12 (1)
11 (2)
10 (4)
9 (10)
8 (5)
7 (1)
6 (3)
5 (1)
4 (4)
3 (25)
2 (7)
1 (29)
2019 (57)
12 (25)
11 (7)
9 (25)