es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo mostrar datos JSON de una API en una TableView?

17 Jun, 2023 Programación

Recibo datos json de una API y estoy totalmente confundido sobre qué hacer a continuación para pasar estos datos a una celda personalizada con imageView y etiquetas para actualizar la interfaz de usuario en la tabla.

Obtener JSON

import Foundation

struct Breed: Codable {
    let name: String?
    let origin: String?
    let life_span:String?
    let temperament: String?
    let description: String?
    let wikipedia_url: String?
    let image: Image?
}

struct Image: Codable {
    let url: String?
}

func getDataFromCatsApi() {

    let url = URL(string: "https://api.thecatapi.com/v1/breeds")

    let task = URLSession.shared.dataTask(with: url!) { data, _ , error in
        let decoder = JSONDecoder()
        if let data = data {
            let breed = try? decoder.decode([Breed].self, from: data)
            print (breed as Any)
        } else {
            print (error as Any)
        }
    }
    task.resume()
}

Todos los datos se imprimen correctamente.

En ViewController tengo una tableView con una celda personalizada.

import UIKit

class MainVC: UIViewController {
    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Cats"
        view.backgroundColor = .systemBackground
        getDataFromCatsApi()

    }
}

extension MainVC: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell",
                                                 for: indexPath) as? CustomTableViewCell

        return cell ?? CustomTableViewCell()
    }
}

Clase para celda personalizada. Aquí tengo imageView y etiquetas para mostrar datos de json.

import UIKit

class CustomTableViewCell: UITableViewCell {
    @IBOutlet weak var catImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var originLabel: UILabel!
    @IBOutlet weak var addToFavButton: UIButton!

}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para pasar los datos JSON recibidos a la celda personalizada con una ImageView y etiquetas para actualizar la interfaz de usuario en TableView, debes hacer lo siguiente:

    1. Crear un array para almacenar los datos JSON recibidos en la función getDataFromCatsApi().

    2. En el gestor de finalización de la tarea, asignar los datos JSON al array creado en el paso 1.

    3. Recargar la vista de tabla con los datos actualizados.

    4. En la función cellForRowAt, utilizar el indexPath para recuperar los datos apropiados del array y actualizar la ImageView y las etiquetas de la celda.

    Aquí está el código actualizado:

    import UIKit

class MainVC: UIViewController {
    @IBOutlet weak var tableView: UITableView!

    var breeds = [Breed]() //1

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Cats"
        view.backgroundColor = .systemBackground
        getDataFromCatsApi()
    }

    func updateUI() { //3
        DispatchQueue.main.async {
            self.tableView.reloadData()
        }
    }

    func showError() { //3
        DispatchQueue.main.async {
            let alert = UIAlertController(title: "Error", message: "No se pudo obtener los datos.", preferredStyle: .alert)
            alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
            self.present(alert, animated: true, completion: nil)
        }
    }
}

extension MainVC: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return breeds.count //2
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? CustomTableViewCell

        let breed = breeds[indexPath.row] //4

        cell?.nameLabel.text = breed.name
        cell?.originLabel.text = breed.origin

        if let urlString = breed.image?.url, let url = URL(string: urlString) {
            cell?.catImageView.sd_setImage(with: url, placeholderImage: UIImage(named: "placeholder"))
        } else {
            cell?.catImageView.image = UIImage(named: "placeholder") //set placeholder image if there's no image URL
        }

        return cell ?? CustomTableViewCell()
    }
}

    Nota: En el ejemplo anterior, se utilizó la biblioteca SDWebImage para cargar y almacenar en caché imágenes de URLs. Asegúrate de instalar esta biblioteca antes de ejecutar el código.

Comments are closed.