24. Juli 2019

Tutorial: JSON-Daten mit URLSession laden und in einem UITableView anzeigen

Dieses Tutorial für zeigt Schritt für Schritt, wie JSON-Daten im Hintergrund mit der URLSession geladen werden, mit der JSONDecoder-Klasse dekodiert werden und in einem UITableView zur Anzeige gebracht werden:

  1. Verwende für dieses Tutorial die aktuelle Version von Xcode (dieses Tutorial wurde zuletzt getestet am 24.7.2019 mit Xcode 10.2).

  2. Verwende das Projekt aus dem UITableViewController-Tutorial oder lade das zugehörige Beispielprojekt Countries. Dieses enthält einen UITableViewController der Daten aus einem Swift-Array zur Anzeige bringt:

    Daten in Tabelle anzeigen

  3. Rufe im Browser die Beispiel-JSON-Daten auf und mache Dich mit dem Format der Daten vertraut:

    JSON-Beispieldaten

    Hinweis: Für dieses Beispiel wird eine HTTPs-URL verwendet, da unverschlüsselte HTTP-URLs seit iOS 9 eine gesonderte Konfiguration erfordern.

  4. Öffne CountriesTableViewController.swift. Verwende die URLSession um einen dataTask zu erzeugen und zu starten:

    class CountriesTableViewController: UITableViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
        
            let url = URL(string: "https://www.ralfebert.de/examples/countries.json")!
            
            let urlSession = URLSession.shared
            
            let task = urlSession.dataTask(with: url) { (data, response, error) in
        
    }
            
            task.resume()
        }
    
        // ...
    
    }

    Hinweis: Verwenden Sie die Code-Vervollständigung um den Aufruf zu tippen und achten Sie darauf, die richtige Methode mit NSURL + completionHandler auszuwählen:

    NSURLSession.dataTask

    Hinweis: Bestätigen Sie den Xcode-Vorschlag mit Enter. Springen Sie mit Tab zu dem completionHandler-Parameter und bestätigen Sie den Vorschlag ebenfalls mit Enter um den Block-Code zu erzeugen. Vergeben Sie hier die Variablennamen data, response, error für die Parameter:

    Xcode Code-Vervollständigung für den Block

  5. Entferne in Countries.swift die Eigenschaft allCountries mit den Beispieldaten und deklariere den Typ als Codable:

    struct Country : Codable {
    
        var iso2: String
        var name: String
    
    }
  6. Passe die countries-Eigenschaft im CountriesTableViewController so an, dass diese zunächst mit einer leeren Liste initialisiert wird. Implementiere den completionHandler des dataTask so, dass die Daten mittels JSONDecoder dekodiert werden und aktualisiere die Darstellung (dies muss auf dem Main-Thread erfolgen, der completionHandler wird auf dem Hintergrund-Thread ausgeführt, der die Daten geladen hat):

    class CountriesTableViewController: UITableViewController {
    
        var countries = [Country]()
     
        override func viewDidLoad() {
            super.viewDidLoad()
        
            let url = URL(string: "https://www.ralfebert.de/examples/countries.json")!
            
            let urlSession = URLSession.shared
            
            let task = urlSession.dataTask(with: url) { (data, response, error) in
                // Fehlerbehandlung für den Fall, das ein Fehler aufgetreten ist und data nicht gesetzt ist
    guard let data = data else {
        debugPrint("Fehler beim Laden", error ?? "Unbekannter Fehler")
        return
    }
                
                // JSON parsen
    self.countries = try! JSONDecoder().decode([Country].self, from: data)
                
                // UI-Darstellung aktualisieren
    OperationQueue.main.addOperation {
        self.tableView.reloadData()
    }
            }
            
            task.resume()
        }
    
        // ...
    
    }
  7. Starten die App mit Product » Run ⌘R und prüfe, dass die Länder geladen und angezeigt werden:

    JSON-Daten in Tabelle anzeigen