#3 使用JSONDecoder把JSON轉換成自訂型別的資料

Max
彼得潘的 Swift iOS / Flutter App 開發教室
6 min readOct 14, 2022

是將曾經面試的題目重新再寫一次並盡可能將當初被面試官提到的問題加以修正!
操作畫面:

是以JSONPlaceholder中的Photos為主題,API網址如下:

https://jsonplaceholder.typicode.com/photos

首先得先確認回傳的JSON資料,透過下列的網站確認,

這個JSON API算是相對簡單的只有一層資料,
可以看到資料裡面有五個Key,albumId、id、title、url跟thumbnaiUrl,
使用Struct來自訂JSON資料的格式,命名為JsonData,由於只需用到id、title、url、thumbnaiUrl這四個Key,所以設定了四個參數,

切記參數內容和資料格式需和JSON回傳的Key一樣和對應,不然會發生“TypeMismatch”!!!
再來就是透過API還抓取JSON的資料並轉換成自訂型別,
為了避免ViewController程式碼過多過於肥大變成Massive View Controller(原為Model View Controller),
所以將抓取JSON資料的Function和後面會用到抓取圖片的Function都寫在JsonController裡,讓後面只需要呼叫這些Function就好,不需要一直重複寫,如果再大一點的Project裡也相對比較好維護,

參考至彼得潘的
iOS MVC App 的 Xcode 專案如何分類檔案(project organization)

Function的寫法是參考彼得潘的
模仿 Apple 官方範例串接 JSON API,定義 function 型別的 completion 參數 & 使用 Result type

我的想法是開啟App時就先將資料下載好,點擊Request API這個時候再將抓到的資料Prepare到下一頁的CollectionView,

為了確定是否有成功抓取資料,在fetchJsonData這個Functioni以及ViewController裡Call fetchJsonData成功時Print出讓自己知道是否有成功,

呈現JSON資料的CollectionView為了確保有成功接收到上一頁ViewController傳過來的資料,在viewDidLoda的時候就先讓它Print出是否有接收成功,

這邊特別提一下,由於CollectionViewCell的特性是會重複利用舊的Cell,所以在cell.jsonDataImageView.image先設成nill,不然就會有機會向下圖一樣呈現舊的cell資料再跑新的出來!

CollectionViewCell的一些Layout設定則是參考至彼得潘的
利用 flow layout 的 collection view 製作照片牆

為了確定點擊的Cell是否跟畫面的Cell是一致的,所以使用了didSelectItemAt這個Function,並Print出點擊的Cell,

點擊Cell便會進到所選資料的單獨頁面,

這頁一樣在viewDidLoda的時候Print了一個確保資料跟所選的是一樣的資訊,

要注意的是這邊的Optional我使用了!強制解包,雖然我知道一定會有資料進來才會有這頁,但更好的寫法應該要使用Optional Binding來避免沒有資料進來的時候變成Crash!
這個Project算是跟剛學習Swift的我做一個比較,當作面試官提出的問題我是否有加以改善,
最後附上這個Project的GitHub

--

--