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()
    }
}

Publicado por Webserveis

Desarrollador freelance programador apasionado por el arte de programar, amante del auto aprendizaje y interesado por la tecnología en general.

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: