SwitUI JSONのList Bundleを読み込み、ローカルJsonファイルを解析、表示する

JSON概要

JSON(JavaScript Object Notation,JSオブジェクトプロファイル)は、軽量レベルのデータ交換フォーマットです.ECMAScript(欧州コンピュータ協会が制定したjs仕様)のサブセットに基づいて、プログラミング言語とは完全に独立したテキストフォーマットを用いてデータを格納し、表す.簡潔で明確な階層はJSONを理想的なデータ交換言語にした.読み取りと作成が容易であり、同時に機械の解析と生成が容易であり、ネットワーク伝送効率を効果的に向上させる.

データを見て

LandmarkData.json

[
    {
        "name": "Turtle Rock",
        "category": "Featured",
        "city": "Twentynine Palms",
        "state": "California",
        "id": 1001,
        "park": "Joshua Tree National Park",
        "coordinates": {
            "longitude": -116.166868,
            "latitude": 34.011286
        },
        "imageName": "turtlerock"
    },
    {
        "name": "Silver Salmon Creek",
        "category": "Lakes",
        "city": "Port Alsworth",
        "state": "Alaska",
        "id": 1002,
        "park": "Lake Clark National Park and Preserve",
        "coordinates": {
            "longitude": -152.665167,
            "latitude": 59.980167
        },
        "imageName": "silversalmoncreek"
    },
    {
        "name": "Chilkoot Trail",
        "category": "Rivers",
        "city": "Skagway",
        "state": "Alaska",
        "id": 1003,
        "park": "Klondike Gold Rush National Historical Park",
        "coordinates": {
            "longitude": -135.334571,
            "latitude": 59.560551
        },
        "imageName": "chilkoottrail"
    },
    {
        "name": "St. Mary Lake",
        "category": "Lakes",
        "city": "Browning",
        "state": "Montana",
        "id": 1004,
        "park": "Glacier National Park",
        "coordinates": {
            "longitude": -113.536248,
            "latitude": 48.69423
        },
        "imageName": "stmarylake"
    },
    {
        "name": "Twin Lake",
        "category": "Lakes",
        "city": "Twin Lakes",
        "state": "Alaska",
        "id": 1005,
        "park": "Lake Clark National Park and Preserve",
        "coordinates": {
            "longitude": -153.849883,
            "latitude": 60.641684
        },
        "imageName": "twinlake"
    },
    {
        "name": "Lake McDonald",
        "category": "Lakes",
        "city": "West Glacier",
        "state": "Montana",
        "id": 1006,
        "park": "Glacier National Park",
        "coordinates": {
            "longitude": -113.934831,
            "latitude": 48.56002
        },
        "imageName": "lakemcdonald"
    },
    {
        "name": "Charley Rivers",
        "category": "Rivers",
        "city": "Eaking",
        "state": "Alaska",
        "id": 1007,
        "park": "Charley Rivers National Preserve",
        "coordinates": {
            "longitude": -143.122586,
            "latitude": 65.350021
        },
        "imageName": "yukon_charleyrivers"
    },
    {
        "name": "Icy Bay",
        "category": "Lakes",
        "city": "Icy Bay",
        "state": "Alaska",
        "id": 1008,
        "park": "Wrangell-St. Elias National Park and Preserve",
        "coordinates": {
            "longitude": -141.518167,
            "latitude": 60.089917
        },
        "imageName": "icybay"
    },
    {
        "name": "Rainbow Lake",
        "category": "Lakes",
        "city": "Willow",
        "state": "Alaska",
        "id": 1009,
        "park": "State Recreation Area",
        "coordinates": {
            "longitude": -150.086103,
            "latitude": 61.694334
        },
        "imageName": "rainbowlake"
    },
    {
        "name": "Hidden Lake",
        "category": "Lakes",
        "city": "Newhalem",
        "state": "Washington",
        "id": 1010,
        "park": "North Cascades National Park",
        "coordinates": {
            "longitude": -121.17799,
            "latitude": 48.495442
        },
        "imageName": "hiddenlake"
    },
    {
        "name": "Chincoteague",
        "category": "Rivers",
        "city": "Chincoteague",
        "state": "Virginia",
        "id": 1011,
        "park": "Chincoteague National Wildlife Refuge",
        "coordinates": {
            "longitude": -75.383212,
            "latitude": 37.91531
        },
        "imageName": "chincoteague"
    },
    {
        "name": "Lake Umbagog",
        "category": "Lakes",
        "city": "Errol",
        "state": "New Hampshire",
        "id": 1012,
        "park": "Umbagog National Wildlife Refuge",
        "coordinates": {
            "longitude": -71.056816,
            "latitude": 44.747408
        },
        "imageName": "umbagog"
    }
]

jsonを読み出して配列に変換

structストレージデータ

を定義する

import SwiftUI
import CoreLocation

struct Landmark: Hashable, Codable, Identifiable {
    var id: Int
    var name: String
    fileprivate var imageName: String
    fileprivate var coordinates: Coordinates
    var state: String
    var park: String
    var category: Category

    var locationCoordinate: CLLocationCoordinate2D {
        CLLocationCoordinate2D(
            latitude: coordinates.latitude,
            longitude: coordinates.longitude)
    }

    enum Category: String, CaseIterable, Codable, Hashable {
        case featured = "Featured"
        case lakes = "Lakes"
        case rivers = "Rivers"
    }
}

extension Landmark {
    var image: Image {
        ImageStore.shared.image(name: imageName)
    }
}

struct Coordinates: Hashable, Codable {
    var latitude: Double
    var longitude: Double
}

jsonから抽出するデータ