Obtener JSON local en SwiftUI

Apuntes para leer los datos de un json almacenados dentro de la app y mostrar los datos en una vista de lista.

Datos del Json

crear un archivo todo.json con lo siguiente estructura

[
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
...

Crear un modelo para datos json

El protocolo Codable sirve para parsear el JSON y el Identificable para proporcionar un indice id.

import  Foundation



struct  TaskModel: Codable, Identifiable {
    let userId: Int
    let id: Int
    let title: String
    let completed: Bool
}

Leer el contenido del Json

Para leer el Json se le debe indicar el uri del documento con Bundle.main.url(). Si el archivo existe, se nos cargará el contenido en una cadena que se deberá descodificar con el objeto TaskModel

func getTask()  {
    guard let url = Bundle.main.url(forResource: "todos", withExtension: "json")
        else {
            print("Json file not found")
            return
        }

    let data = try? Data(contentsOf: url)
    let taskModelsList = try? JSONDecoder().decode([TaskModel].self, from: data!)
    self.items = taskModelsList!

}

Crear un ViewModel

Para poder tener los datos sincronizados con la vista se debe implementar un ObservableObject

class MyViewModel: ObservableObject {
    @Published var items = [TaskModel]()

   //func getTask() 

}

Mostrar los datos en la lista

Para mostrar los datos del json a una lista en el archivo contentView.swift se debe inicializar el viewmodel para luego obtener las tareas con el método getTask dentro del evento .onAppear de la vista

import SwiftUI

struct ContentView: View {
    @ObservedObject var viewModel = MyViewModel()

    var body: some View {

        NavigationView {
            VStack {
                List(viewModel.items, id: \.id) { item in
                    VStack(alignment: .leading) {
                        Text(item.title).strikethrough(item.completed)
                        Text("id: \(item.id) user id: \(item.userId)")
                            .font(.caption)
                            .foregroundColor(.secondary)
                    }
                }.listStyle(GroupedListStyle())
            }.onAppear(perform: {
                viewModel.getTask()
            })
            .navigationBarTitle("Local JSON Data")
        }        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Anuncio publicitario