소개

이전 기사에서 golang에서 api를 만들었습니다.
→ golang에서 손쉽게 API 만들기
api 만들면 두드리고 싶어지는 남자의 성

이번 기사에서는 * 쉽게 * api에서 json을 얻고 테이블보기에 표시하는 방법을 작성하고 싶습니다.
세세한 곳의 설명은 생략합니다만, 기회가 있으면 정리하고 싶습니다.

GitHub에서 EC2로 Pull

생략했지만 마지막으로 만든 api를 게시했습니다.

화면 만들기

우선 화면을 만듭니다.

Table View 위에 셀을 놓고 그 위에 버튼과 레이블을 놓습니다.
이번에는 「태스크의 완료/미완료를 설정하는 버튼」 「태스크명을 표시하는 라벨」 「기한을 표시하는 라벨」의 3개를 설치합니다.
코드에서 식별할 수 있도록 세 개의 각 태그에 숫자를 설정합니다.
(이미지에서는 완료/미완료를 설정하는 버튼의 tag에 「1」을 설정하고 있다)

api 두드려보기

ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let url: URL = URL(string: "http://xxx.xxx.xxx.xxx:xxxx/api/v1/tasks")!
        let task: URLSessionTask  = URLSession.shared.dataTask(with: url, completionHandler: {data, response, error in
            do {
                let json = try JSONSerialization.jsonObject(with: data!, options: JSONSerialization.ReadingOptions.allowFragments) as! [Any]
                let jsonMap = json.map { (jsonMap) -> [String: Any] in
                    return jsonMap as! [String: Any]
                }
                print(jsonMap)
            }
            catch {
                print(error)
            }
        })
        task.resume()
    }
}

viewDidLoad()는 화면 그리기 전에 호출되는 메서드입니다.
여기서 api를 두드려 보자!
task.resume() 실행 후, data 안에 get에 대한 응답이 돌아온다.
후속 처리에서 JSON으로 퍼스.
실행 결과↓(JSON 형식으로 데이터를 취득할 수 있는 것을 확인할 수 있습니다.)

TableView의 셀에 표시해보기

ViewController.swift

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{

    @IBOutlet weak var tableView: UITableView!

    var jsonMap: [[String: Any]] = []

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.delegate = self
        tableView.dataSource = self

        let url: URL = URL(string: "http://xxx.xxx.xxx.xxx:xxxx/api/v1/tasks")!
        let task: URLSessionTask  = URLSession.shared.dataTask(with: url, completionHandler: {data, response, error in
            do {
                let json = try JSONSerialization.jsonObject(with: data!, options: JSONSerialization.ReadingOptions.allowFragments) as! [Any]
                self.jsonMap = json.map { (jsonMap) -> [String: Any] in
                    return jsonMap as! [String: Any]
                }
                print(self.jsonMap)
            }
            catch {
                // 例外処理を書く
                print(error)
            }
        })
        task.resume()
    }

    // セルの設定
    // ここで、セルの中身を設定する
    func tableView(_ table: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = table.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        let taskNameLbl = cell.viewWithTag(2) as! UILabel
        let deadlineLbl = cell.viewWithTag(3) as! UILabel

        taskNameLbl.text = jsonMap[indexPath.row]["TaskName"] as? String
        deadlineLbl.text = jsonMap[indexPath.row]["Deadline"] as? String

        return cell
    }

    // セル数の設定
    // 今回は、apiを叩いた後、jsonMapにデータが格納されるので、`jsonMap.count`を設定
    func tableView(_ table: UITableView, numberOfRowsInSection section: Int) -> Int {
        return jsonMap.count
    }

    // セルの高さを設定
    func tableView(_ table: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 90.0
    }
}

Main.storyboard의 Table View를 IBOutlet에서 tableView로 연결합니다.
그런 다음 UITableViewDataSource, UITableViewDelegate를 상속하고 필요한 메서드를 추가합니다.
셀의 내용은 추가한 메소드 안에서 설정!

움직여 보자

목록이 표시되지 않음...
디버그 콘솔을 보는 한 api에서 데이터를 얻을 수 있습니다 ...

원인

api의 응답이 오기 전에 tableview가 그려져 있기 때문에!
응답을 얻은 후 뷰를 다시 그리면됩니다.self.tableView.reloadData() 를 print(self.jsonMap) 의 전후에 추가

무사히 표시할 수 있었습니다.

미래

이번에는 swift에서 GET에서 api에서 데이터를 검색했습니다.
데이터 취득 이외에도 업데이트/삭제 등 앱에서 조작할 수 있게 되고 싶네요.
또한 기능을 확장할 때 좀 더 깨끗하게 코드를 정리하고 싶습니다.