SwiftUI 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并转化为数组

  1. 定义一个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
}

  1. 从json中提取数据

你可能感兴趣的:(SwiftUI JSON之List读取Bundle、解析、显示本地Json文件)