在嵌套的 JSON 数组中识别数据：SwiftUI 完整指南

2024-03-20 12:02:31

在嵌套的 JSON 数组中识别数据：SwiftUI 指南

引言

当你尝试从 JSON 数据中提取特定信息时，有时会出现一个常见的挑战：嵌套在数组中的数据。如果处理不当，这可能会让你的解析任务变得复杂而耗时。本文旨在为 iOS 17 中的 SwiftUI 开发人员提供一个全面的指南，以帮助他们识别和提取嵌套在 JSON 数组中的数据。

理解嵌套的 JSON 数据

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，广泛用于存储和传输数据。嵌套的 JSON 数据结构允许你将数据存储在数组或字典中，而这些数组或字典又嵌套在其他数组或字典中。这种结构非常适合表示复杂的数据关系。

创建 Identifiable 模型

为了在列表视图中识别和显示数组中的数据，我们需要创建符合 Identifiable 协议的模型。这将为数组中的每个数据项提供一个唯一标识符，使 SwiftUI 能够跟踪它的状态。

提取嵌套数据

提取嵌套在 JSON 数组中的数据涉及以下步骤：

解码 JSON 文件： 使用 JSONDecoder 解码 JSON 文件并将数据存储在模型中。
识别嵌套数组： 在模型中，找到包含嵌套数据的数组。
更新列表视图： 在 SwiftUI 列表视图中，使用 id 作为标识符，以唯一地识别数组中的每个数据项。
访问数据： 使用点语法访问嵌套数据项的属性和值。

示例实现

考虑以下 JSON 文件：

{
  "key1": 123,
  "key2": "word",
  "key3": [
    {
      "combination": 193804,
      "color": "blue",
      "size": 2
    },
    {
      "combination": 785435,
      "color": "red",
      "size": 6
    },
    {
      "combination": 503953,
      "color": "yellow",
      "size": 6
    }
  ],
  "key4": "something",
  "key5": {
    "key4a": 54,
    "key4b": "thisword",
    "key4c": "letters"
  }
}

使用上面的指南，我们可以创建一个 ThisData 模型，其中包含一个嵌套 OtherData 模型来表示 "key3" 数组中的数据：

struct ThisData: Decodable {
    let key3: [OtherData]
    
    struct OtherData: Decodable, Identifiable {
        let id = UUID()
        let combination: Int
        let color: String
        let size: Int
    }
}

然后，我们可以使用以下代码从 JSON 文件中解码数据：

func fetchData() {
    guard let url = Bundle.main.url(forResource: "data", withExtension: "json") else {
        fatalError("Could not find JSON file.")
    }
    
    do {
        let data = try Data(contentsOf: url)
        let decoder = JSONDecoder()
        let decodedData = try decoder.decode(ThisData.self, from: data)
        self.thisData = decodedData.key3
    } catch {
        fatalError("Could not decode JSON data: \(error)")
    }
}

最后，我们在 SwiftUI 列表视图中显示数据：

struct ThisView: View {
    
    @State private var thisData: [ThisData.OtherData] = []
    
    var body: some View {
        ScrollView {
            List(thisData, id: \.id) { info in
                Text("Combination: \(info.combination)")
                Text("Color: \(info.color)")
                Text("Size: \(info.size)")
            }
            .onAppear {
                fetchData()
            }
        }
    }
}