如何处理 JSON 文件的数据（Data from JSON）

By 前端达人

Published in C-高级进阶

August 06, 2022

1 min read

数据是任何应用程序的核心。如果您不从 Contentful 等第三方服务加载数据，则可以依赖 JSON 文件中的本地数据。让我们学习如何将 JSON 数据加载和解析到我们的 SwiftUI 应用程序中。

什么是JSON?

JSON，也称为 JavaScript Object Notation，是一种轻量级的数据格式。它适用于键值对，并且只接受某些类型的值：对象、数组、字符串、数字、布尔值、空值。下面是 JSON 的一个简单示例

{
        "name": "John",
        "age": 30,
        "car": null
}

创建你的数字模型（model）

接下来创建我们的数字模型，例如我们来创建一个 Animal 模型，每个模型都包含 id ，name，age 和 type 属性。**

// Animal.swift

struct Animal: Identifiable, Decodable {
        var id: Int
        var name: String
        var age: Int
        var type: String
}

创建 JSON 数据文件

基于刚才的 Animal 模型我们来创建 JSON 相关的数据，这里需要注意的是 JSON 数据的数据项的属性需要和 model 类型的属性一一对应。

// animalData.json
[
        {
                "id": 1001,
                "name": "Toto",
                "age": 3,
                "type": "Dog"
        },
        {
                "id": 1002,
                "name": "Betsy",
                "age": 7,
                "type": "Cat"
        },
        {
                "id": 1003,
                "name": "Olive",
                "age": 36,
                "type": "Tortoise"
        },
        {
                "id": 1004,
                "name": "Jupiter",
                "age": 10,
                "type": "Parrot"
        },
        {
                "id": 1005,
                "name": "Ulysse",
                "age": 17,
                "type": "Monkey"
        }
]

注意：为了防止程序报错，小编强烈建议用 JSON 工具进行验证其数据格式的正确性。

创建数据解析文件

继续我们来创建 ModelData 文件，来解析我们的 JSON 数据文件，示例代码如下

// ModelData.swift

var animals: [Animal] = load("animalData.json")

func load<T: Decodable>(_ filename: String) -> T {
    let data: Data

    guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
        else {
            fatalError("Couldn't find \(filename) in main bundle.")
    }

    do {
        data = try Data(contentsOf: file)
    } catch {
        fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
    }

    do {
        let decoder = JSONDecoder()
        return try decoder.decode(T.self, from: data)
    } catch {
        fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
    }
}

上面的 load() 函数从作为参数传递的文件路径中获取文件，并将 JSON 数据解码为 Swift 可以读取的格式。如果有错误，错误将打印在控制台中。

加载功能完成后，您的数据将可用并准备好使用，定义 animals 数组类型为 Animal 类型的数组，因为 load() 函数需要知道它应该输出什么类型的数据，如果成功返回将保存在 animals 中。

在界面中使用

最后我们需要在界面中渲染 animals 变量中的数据，我们可以使用 ForEach 循环来展示数据，示例代码如下

var body: some View {
        VStack {
                ForEach(animals) { animal in
                        Text("\(animal.name) is a \(animal.type) and is \(animal.age) years old.")
                }
        }
}