前言

前面我們了解基本的檔案處理之後，接下來當然就是試著實作讀取一些不同格式的檔案，因此這一篇將會介紹我們前端工程師常用的 JSON 檔案。

JSON

對於一名前端工程師來講，相信 JSON (JavaScript Object Notation) 應該不會很陌生，但是如果你不清楚 JSON 的背景以及它的一些細節的話，那麼建議你可以閱讀我先前寫的這一篇「JavaScript 核心觀念(32)-物件-JSON」文章先稍微回顧惡補一下。

你看完了嗎？不，我相信你沒看。

前面開玩笑的，我說的是在場都是...（被揍）

那麼為了確保接下來的動作都正確，所以前面我還是簡單介紹一下關於 JSON 的部分。

首先先讓我們看一段簡易的 JSON 格式：

{
  "keyID": 0,
  "blogList": [
    {
      "title": "PixiJS V5 教學 (0)",
      "url": "https://hsiangfeng.github.io/javascript/20200203/3949702627/"
    },
  ],
  "updateTime": "2020/2/18 下午 7:49:36",
  "blogUrl": "https://hsiangfeng.github.io/",
  "name": "Ray"
}

發現了嗎？上面的 JSON 範例可以發現與 Python 的字典非常相像，這邊我也拉一個先前的 Python 字典範例給大家比較看看：

dic = {
  'name': 'Ray',
}

可以發現單純只是雙引號變成單引號而已，甚至你把整個 JSON 拉過來 Python 運作都不會出現任何錯誤：

json = {
  "keyID": 0,
  "blogList": [
    {
      "title": "PixiJS V5 教學 (0)",
      "url": "https://hsiangfeng.github.io/javascript/20200203/3949702627/"
    },
  ],
  "updateTime": "2020/2/18 下午 7:49:36",
  "blogUrl": "https://hsiangfeng.github.io/",
  "name": "Ray"
}

print(json) # is working!

這時候你可能會想說「所以我可以這樣寫入一個 JSON 格式囉？！」

身為工程師必須要有實驗的精神，因此這邊你可以試著輸入以下程式碼看看結果會怎麼樣：

dic = {
  "keyID": 0,
  "blogList": [
    {
      "title": "PixiJS V5 教學 (0)",
      "url": "https://hsiangfeng.github.io/javascript/20200203/3949702627/"
    },
  ],
  "updateTime": "2020/2/18 下午 7:49:36",
  "blogUrl": "https://hsiangfeng.github.io/",
  "name": "Ray"
}

f = open('example.json', 'w')
f.write(dist)
f.close()

你嘗試了嗎？如果你有嘗試上面範例程式碼的話，你應該會出現這一段 TypeError: write() argument must be str, not dict 錯誤訊息。

最主要原因是 write 只接受純粹的 String 格式，此時異想天開的你或許會想說「那我就用 str 型別轉換就好了呀？」，實際上是不行的，如果你用這種方式的話，結果會變成一個錯誤的 JSON 格式：

{'keyID': 0, 'blogList': [{'title': 'PixiJS V5 教學 (0)', 'url': 'https://hsiangfeng.github.io/javascript/20200203/3949702627/'}], 'updateTime': '2020/2/18 下午 7:49:36', 'blogUrl': 'https://hsiangfeng.github.io/', 'name': 'Ray'}

奇妙吧？畢竟你要知道一件事情 JSON 是 JavaScript 的子集(意指參照基於 JavaScript 延伸出來的)，因此對於 JavaScript 的相容性會是最好的，因此如果你要用於 Python 的話，則必須使用另一個東西來處理。

JSON 模組

這邊先拉回到 JavaScript 的角度來簡單聊一下，通常我們在儲存一些資料到 localStorage 時都會搭配使用 JSON.stringify，而從 localStorage 拉出資料到 JavaScript 中就會使用 JSON.parse 來轉換回原本的 JavaScript 物件：

const a = {
  keyID: 0,
  blogList: [
    {
      title: "PixiJS V5 教學 (0)",
      url: "https://hsiangfeng.github.io/javascript/20200203/3949702627/"
    }
  ],
  updateTime: "2020/2/18 下午 7:49:36",
  blogUrl: "https://hsiangfeng.github.io/",
  name: "Ray"
}

localStorage.setItem('test', JSON.stringify(a)); // 儲存

JSON.parse(localStorage.getItem('test'))// 取出

那麼本身 Python 如果想要處理 JSON 格式的話，就必須引入 Python 的 JSON 模組：

import json

其中 JSON 模組中有 dumps 方法可以將 Python 的 dict 型別轉換成 JSON 格式，寫法與用法也相當的簡易，讓我們來看一下：

import json

dic = {
  "keyID": 0,
  "blogList": [
    {
      "title": "PixiJS V5 教學 (0)",
      "url": "https://hsiangfeng.github.io/javascript/20200203/3949702627/"
    },
  ],
  "updateTime": "2020/2/18 下午 7:49:36",
  "blogUrl": "https://hsiangfeng.github.io/",
  "name": "Ray"
}



f = open('example.json', 'w')
f.write(json.dumps(dic))
f.close()

發現了嗎？你可以正常的寫入一個 JSON 格式了呢！而且不會出現任何錯誤！

那麼反之讀取呢？雖然你可以直接這樣子讀取 JSON 格式：

f = open('example.json', 'r')
read = f.read()
f.close()
print(read)

但是如果你要拿 JSON 格式的資料做一些處理的話，就必須使用 JSON 模組來轉換成 Python 可以讀的型別，否則 f.read() 出來的檔案型別會是一個 str(字串)：

f = open('example.json', 'r')
read = f.read()
f.close()
print(type(read)) # str

那你可能會想說這樣會有什麼問題嗎？通常我們將 JSON 讀取後，可能會需要使用它某個欄位的屬性，那麼如果不透過 JSON 模組處理的話，你是無法取得特定屬性的，畢竟一整個都是一個 str 型別：

f = open('example.json', 'r')
read = f.read()
f.close()
print(type(read))
print(read['name']) # TypeError: string indices must be integers

因此當你取得 JSON 格式後，請記得使用 JSON 模組轉換成 Python 可以讀懂的型別：

import json

f = open('example.json', 'r')
read = f.read()
f.close()
print(type(read))
data = json.loads(read)
print(data['name']) # Ray

所以其實可以發現 JSON 格式的資料，不管是在 JavaScript 還是 Python 中都是必須額外處理的唷。

作者的話

因為家裡的人說喜歡我做的花雕醉雞...所以又跑去買了新的酒回來，但是這次打算嘗試製作紹興醉雞試試看，或許味道也不錯？！

關於兔兔們

• Tailwind CSS 臺灣官網
• Tailwind CSS 臺灣 (臉書粉絲專頁)
• 兔兔教 × Tailwind CSS Taiwan (臉書社群)
• 兔兔教大本營