JSON-Daten in einem UITableView anzeigen

Dieses Tutorial für Xcode 8.2 und Swift 2 zeigt Schritt für Schritt, wie JSON-Daten im Hintergrund von einem Server geladen werden und in einem UITableView zur Anzeige gebracht werden:

  1. Verwenden Sie für dieses Tutorial die aktuelle Version von Xcode 8.2 (dieses Tutorial wurde zuletzt getestet am 10.2.2017 mit Xcode 8.2).

  2. Erstellen Sie mit File » New » Project (⌘⇧N) ein neues iOS » Application » Single View Application-Projekt:

    Single View Application erstellen

  3. Nennen Sie das Projekt „TableExample“ und wählen Sie als Language Swift und erstellen Sie die App nur für iPhone-Geräte:

    Projekteinstellungen Xcode-Projekt
  4. Entfernen Sie mit Edit » Delete (⌘⌫) den bestehenden Controller im Storyboard. Entfernen Sie zudem die bestehende Quelltextdatei ViewController.swift (bestätigen Sie die Lösung mit Move to Trash um die Datei auch aus dem Projektordner zu löschen):

    Bestehenden ViewController entfernen
  5. Erstellen Sie mit File » New » File (⌘N) eine neue Cocoa Touch Class. Achten Sie dabei darauf, dass iOS » Source ausgewählt ist, um eine Quelltextdatei für iOS zu erstellen:

    New Cocoa Touch Class
  6. Wählen Sie UITableViewController für Subclass aus und geben als Name „ItemsTableViewController“ an:

    UITableViewController Klasse erstellen
  7. Fügen Sie dem Storyboard einen neuen TableViewController hinzu, indem Sie in der Objekt Library nach table suchen und einen neuen TableViewController in das Storyboard ziehen:

    UITableViewController im Storyboard hinzufügen
  8. Wählen Sie den View-Controller aus und konfigurieren Sie ihn mit Is Initial View Controller als Eintrittspunkt für das Storyboard:

    Set Initial View Controller
  9. Geben Sie zudem die erstellte Klasse als Custom Class für den Controller an:

    Set Initial View Controller
  10. Wählen Sie die Zelle aus. Konfigurieren Sie den Style auf „Basic“ und vergeben Sie den Identifier „ItemCell“, um die Zelle später im Code referenzieren zu können:

    Cell: Reuse Identifier
  11. Machen Sie sich im Browser mit dem Format der Beispiel-JSON-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.

  12. Öffnen Sie ItemsTableViewController.swift und rufen Sie hier downloadTaskWithURL:completionHandler: auf, um einen neuen Hintergrund-Download-Task zu erstellen:

    class ItemsTableViewController: UITableViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
        
            let url = URL(string: "https://www.ralfebert.de/examples/fruits.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

  13. Fügen Sie eine Eigenschaft items hinzu um die Ergebnisliste zu halten, parsen Sie die geladenen JSON-Daten und aktualisieren Sie die Oberfläche auf dem Main-Thread:

    class ItemsTableViewController: UITableViewController {
    
        var items = [[String:AnyObject]]()
        
        override func viewDidLoad() {
            super.viewDidLoad()
    
            let url = NSURL(string: "https://www.ralfebert.de/examples/fruits.json")!
            let urlSession = NSURLSession.sharedSession()
            
            let task = urlSession.dataTaskWithURL(url) { (data, response, error) in
                
                // JSON parsen und Ergebnis in eine Liste von assoziativen Arrays wandeln
    let jsonData = try! JSONSerialization.jsonObject(with: data!, options: [])
    self.items = jsonData as! [[String:AnyObject]]
    
    // UI-Darstellung aktualisieren
    OperationQueue.main.addOperation {
        self.tableView.reloadData()
    }
                
            }
            
            task.resume()
        }
    }
  14. Implementieren Sie die Methoden numberOfSections und tableView:numberOfRowsInSection: so dass die korrekte Anzahl der Einträge in der Ergebnisliste zurückgeliefert wird:

    // MARK: - Table view data source
    
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }
  15. Ent-kommentieren Sie die Methode tableView:cellForRowAtIndexPath: und implementieren Sie sie so, dass die Zellen gemäß der Listeneinträge befüllt werden:

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ItemCell", for: indexPath)
        
        let item = items[indexPath.row]
    
    cell.textLabel?.text = item["title"] as? String
        
        return cell
    }
  16. Entfernen Sie den verbleibenden Code in der Klasse.

  17. Starten Sie die App mit Product » Run (⌘R) und prüfen Sie, dass die Einträge in der Tabelle angezeigt werden:

    JSON-Daten in Tabelle anzeigen

Weitere Informationen

Hinweis: In diesem Tutorial wurde der einfachste Weg, JSON-Daten in einem UITableView zur Anzeige zu bringen, gewählt:

Diese weitergehenden Themen werden im Buch „iOS 10-Apps entwickeln mit Swift & Xcode 8“ behandelt und für die Implementierung einer Beispielanwendung angewendet.

Ralf Ebert Ralf Ebert ist langjähriger Entwickler für iOS und OS X und vermittelt in seinem Swift-Buch seine Kenntnisse und Erfahrungswerte aus 5 Jahren Tätigkeit als Entwickler für OS X und iOS. Er hat mehrere Apps für Mac, iPhone und iPad konzipiert und entwickelt und vertreibt seine Apps erfolgreich über den App Store. Seit 2009 gibt er sein Know-How in iOS-Trainings für Softwareentwickler weiter, die von den Teilnehmern stets ausgezeichnet bewertet werden.