【swift】楽天GoraAPIから取得したデータをデバックエリアに表示させたい

Question

楽天GoraAPIから取得したデータをデバックエリアに表示させたいのですが、表示できません。
こちらの不具合を解消させる方法はありますでしょうか？

struct Article: Codable {
    
    var Item: item

    struct item: Codable {
        let golfCourseImageUrl :String
        let golfCourseName  :String
        let golfCourseDetailUrl :String
        let golfCourseCaption :String

    }
}

import UIKit
import Alamofire

class ArticleListViewController: UIViewController {
    
    
    let decoder: JSONDecoder = JSONDecoder()
    var articles = [Article]()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        getGoraArticles()
        
    }
    

    
    private func getGoraArticles() {
        AF.request("https://app.rakuten.co.jp/services/api/Gora/GoraGolfCourseSearch/20170623?format=json&applicationId=1009125500320074344").responseJSON { response in
            switch response.result {
            case .success:
                do {
                    self.articles = try self.decoder.decode([Article].self, from: response.data!)
                    
                    print("-------------- \(self.articles) --------------")
                } catch {
                    print("デコードに失敗しました")
                }
            case .failure(let error):
                print("error", error)
            }
        }
    }
}

Comments

[hoshi-takanori]

型が合ってないように見えますが、具体的にどのような JSON が返ると想定してますか？

[tyu]

golfCourseImageUrl,golfCourseName, golfCourseDetailUrl,golfCourseCaptionのデータを表示したいと考えています。

[hoshi-takanori]

それは分かりますが、そこにたどり着くにはまず返ってくる JSON をよく観察する必要があるかと。
たぶんトップレベルは Article の配列ではなく Article そのものでしょうし、その中の item は配列なのでは…。

[tyu]

帰ってくるJSONによってstructの部分が変わってくるんですね。ネットでstruct部分の事を調べたのですがよく理解出来ませんでした。何か初心者にも分かりやすく参考になるサイトなどはありますでしょうか？

Answer 1

まず、Web API を直接叩いて、返ってくる JSON を観察します。
(やり方は、ブラウザで API を叩いて結果を VSCode などで整形する、ブラウザに機能拡張を入れる、Postman などの専用ツールを使う、ターミナルで curl と jq を使う、など色々あります。)

{
  "count": 2053,
  "page": 1,
  "first": 1,
  "last": 30,
  "hits": 30,
  "carrier": 0,
  "pageCount": 69,
  "Items": [
    {
      "Item": {
        "golfCourseId": 80004,
        "golfCourseName": "アジア取手カントリー倶楽部",
        "golfCourseAbbr": "アジア取手CC",
        "golfCourseNameKana": "あじあとりでかんとりーくらぶ",
        "golfCourseCaption": "常磐道の谷和原I.C.より15分！都心からのアクセスの良さが魅力。姉妹コースに続き、【セグウェイ】を100台導入！日本一の導入数を誇ります。フェアウェイ乗り入れ可能で移動も快適、【セグウェイでゴルフ】を是非体験してみて下さい。\r\n\r\n【お得プランの一部をご紹介】\r\n・全日廻り放題！＊当日の天候、日没状況により、追加ラウンドできない場合もございます。\r\n・お誕生月特典あり！\r\n・平日は食べ放題のランチバイキング、4サム割引きあり。\r\nお得で楽しい一日をお気軽にお過ごし下さい。",
        "address": "茨城県取手市稲1340",
        "latitude": 35.9061664,
        "longitude": 140.0397556,
        "highway": "常磐自動車道谷和原",
        "golfCourseDetailUrl": "https://booking.gora.golf.rakuten.co.jp/guide/disp/c_id/80004",
        "reserveCalUrl": "https://search.gora.golf.rakuten.co.jp/cal/disp/c_id/80004",
        "ratingUrl": "https://booking.gora.golf.rakuten.co.jp/voice/detail/c_id/80004",
        "golfCourseImageUrl": "https://gora.golf.rakuten.co.jp/img/golf/80004/photo1.jpg",
        "evaluation": 3.4
      }
    },
    // 以下略

JSON の読み方は、{} がオブジェクト (Swift では構造体)、[] が配列です。
一番外側から見ていくと、こんな感じですね。

{
  "count": 2053,
  "page": 1,
  // 略
  "Items": [ (省略) ]
}

{} つまりオブジェクトなので、struct にします。count や page などは不要なら省略しても構いません。

肝心の Items は [] なので配列になります。(要素の型はのちほど。)

struct Article: Codable {
    var count: Int
    var page: Int
    // 略
    var Items: [要素の型]
}

また、デコードの際に decode([Article].self, ...) としてますが、これだと一番外側が配列という意味になりますが、今回はそうではないので、decode(Article.self, ...) でいいはずです。

次に、Items の要素ですが、こんな感じでオブジェクトの入れ子になってます。

    {
      "Item": {
        "golfCourseId": 80004,
        "golfCourseName": "アジア取手カントリー倶楽部",
        // 略
      }
    },

ので、struct が 2 つ必要になります。外側は適当に ItemWrapper、内側は一番大事なもので、ゴルフコースの情報なので GolCourse でしょうか。なお、構造体を入れ子にする記事が多いようですが、個人的には入れ子にする必要はないかと。また、型名の最初の文字は大文字にしましょう。

struct Article: Codable {
    var Items: [ItemWrapper]
}

struct ItemWrapper: Codable {
    var Item: GolfCourse
}

struct GolfCourse: Codable {
    var golfCourseName: String
    var golfCourseCaption: String
    var golfCourseDetailUrl: String
    var golfCourseImageUrl: String
}

(ちなみに、API のパラメーターに formatVersion=2 を指定すると ItemWrapper は不要になります。)

それから、型のテストですが、Playground 機能を使うと良いかも。Xcode の File メニューから New → Playground... して、次のコードを貼り付けて実行してみましょう。

import Foundation

struct Article: Codable {
    var Items: [ItemWrapper]
}

struct ItemWrapper: Codable {
    var Item: GolfCourse
}

struct GolfCourse: Codable {
    var golfCourseName: String
    var golfCourseCaption: String
    var golfCourseDetailUrl: String
    var golfCourseImageUrl: String
}

// #""" と """# の間には複数行のテキストを書けるので、JSON をそのまま貼り付けられます。
let json = #"""
    {
      "count": 2053,
      "page": 1,
      "first": 1,
      "last": 30,
      "hits": 30,
      "carrier": 0,
      "pageCount": 69,
      "Items": [
        {
          "Item": {
            "golfCourseId": 80004,
            "golfCourseName": "アジア取手カントリー倶楽部",
            "golfCourseAbbr": "アジア取手CC",
            "golfCourseNameKana": "あじあとりでかんとりーくらぶ",
            "golfCourseCaption": "常磐道の谷和原I.C.より15分！都心からのアクセスの良さが魅力。姉妹コースに続き、【セグウェイ】を100台導入！日本一の導入数を誇ります。フェアウェイ乗り入れ可能で移動も快適、【セグウェイでゴルフ】を是非体験してみて下さい。\r\n\r\n【お得プランの一部をご紹介】\r\n・全日廻り放題！＊当日の天候、日没状況により、追加ラウンドできない場合もございます。\r\n・お誕生月特典あり！\r\n・平日は食べ放題のランチバイキング、4サム割引きあり。\r\nお得で楽しい一日をお気軽にお過ごし下さい。",
            "address": "茨城県取手市稲1340",
            "latitude": 35.9061664,
            "longitude": 140.0397556,
            "highway": "常磐自動車道谷和原",
            "golfCourseDetailUrl": "https://booking.gora.golf.rakuten.co.jp/guide/disp/c_id/80004",
            "reserveCalUrl": "https://search.gora.golf.rakuten.co.jp/cal/disp/c_id/80004",
            "ratingUrl": "https://booking.gora.golf.rakuten.co.jp/voice/detail/c_id/80004",
            "golfCourseImageUrl": "https://gora.golf.rakuten.co.jp/img/golf/80004/photo1.jpg",
            "evaluation": 3.4
          }
        }
      ]
    }
    """#

let article = try! JSONDecoder().decode(Article.self, from: json.data(using: .utf8)!)
for i in 0..<article.Items.count {
    print(article.Items[i].Item.golfCourseName)
    print(article.Items[i].Item.golfCourseCaption)
    print(article.Items[i].Item.golfCourseDetailUrl)
    print(article.Items[i].Item.golfCourseImageUrl)
}

Comments

[tyu]

親切かつ丁寧にご教授いただき本当にありがとうございました。無事導入したい機能を実装することができました。
JSONの観察（ChromにJSON Formatterを入れました）→struct構文の作成方法の部分はネットで探してもわからない部分であったので、hoshi-takanoriさんのおかげで理解が深まりました。