Menggunakan JSON Untuk TableView Di Swift

Hasil running JSON di Swift menggunakan simulator di iPhone X.

JSON SWIFT inTableView
Tampilan TableView dengan JSON

Buka kembali project app sewa mobile yang sudah dibuat.

Tambahkan View Controller
dengan cara mendrag/menyeret komponen View Controller ke Storyboard

Pada View Controller kita tambahkan komponen Table View dengan cara mendrag/menyeret ke View Controller.
Ubah Prototype Cells : menjadi 1

Tambahkan komponen 1 Images dan 5 Label pada Prototype Cells.

Buatlah New File… dengan nama ViewMobil.swift

Buat lagi New File… dengan subclass of : UITableViewCell

Klik pada Prototype Cells, isi identifier : Cell

Identifier Cell
Identifier Cell

Ubah Custom Class Prototype Cells dengan TableViewCell : CellMobil.swift yang telah dibuat

Custom Class Cell
Custom Class Cell

Jangan lupa delegasikan TableView dengan ViewController supaya terhubung.

Tambahkan code pada ViewMobil.swift


//
// ViewMobil.swift
// Sewa Mobil
//
// Created by Handoyo on 3/29/18.
// Copyright © 2018 Handoyo. All rights reserved.
//

import UIKit
import Alamofire
import SwiftyJSON

class ViewMobil: UIViewController, UITableViewDataSource, UITableViewDelegate {

     var arrDict :NSMutableArray=[]
     @IBOutlet weak var tvJSON: UITableView!

     override func viewDidLoad() {
     super.viewDidLoad()

     DispatchQueue.main.async(execute: {
          let parameters = [
               "token": "H1TaqaC4LHxshD3RZ0n1VAq06"
          ]
          //koneksi ke API mobil.php
          let url:String = "http://localhost/sewamobil/api/mobil.php"
          Alamofire.request(url, method: .post, parameters: parameters)
          .responseJSON { response in
               if let JSON2 = response.result.value {
                    self.arrDict.removeAllObjects()
                    if let data:NSArray = (JSON2 as AnyObject).value(forKey: "result") as? NSArray
                    {
                    print(data)
                    for i in 0 ..< ((JSON2 as AnyObject).value(forKey: "result") as! NSArray).count
                    {
                         self.arrDict.add(((JSON2 as AnyObject).value(forKey: "result") as! NSArray) .object(at: i))
                    }
               }
               self.tvJSON.reloadData()
               }
          }
     })
     }

     func numberOfSections(in tableView: UITableView) -> Int
     {
          return 1
     }

     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
     {
          return arrDict.count
     }

     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
     {
          let cell : CellMobil! = tableView.dequeueReusableCell(withIdentifier: "Cell") as! CellMobil

          if let nama_mobil : NSString=(arrDict[indexPath.row] as AnyObject).value(forKey: "nama_mobil") as? NSString {

               let nopol : NSString=(arrDict[indexPath.row] as AnyObject).value(forKey: "no_polisi") as! NSString
               let harga : NSString=(arrDict[indexPath.row] as AnyObject).value(forKey: "harga") as! NSString
               let jumlah : NSString=(arrDict[indexPath.row] as AnyObject).value(forKey: "jumlah") as! NSString
               let supir : NSString=(arrDict[indexPath.row] as AnyObject).value(forKey: "supir") as! NSString
               let image : NSString=(arrDict[indexPath.row] as AnyObject).value(forKey: "foto") as! NSString

               cell.labelNama.text = nama_mobil as String
               cell.labelNopol.text = nopol as String
               cell.labelHarga.text = harga as String
               cell.labelJumlah.text = jumlah as String
               cell.labelSupir.text = supir as String
               cell.downloadImage(URL(string: image as String)!)
          } else {
               cell.labelNama.text = ""
               cell.labelNopol.text = ""
               cell.labelHarga.text = ""
               cell.labelJumlah.text = ""
               cell.labelSupir.text = ""
          }
          return cell as CellMobil
     }

}

Untuk versi Library SwiftyJSON menampilkan data API ke TableView tambahkan coding berikut :

//Jika menggunakan swiftyJSON untuk tableView ---------------------------------
if let value = response.result.value {
   let json = JSON(value)
   if json["result"].arrayObject != nil {
      self.arrDict.removeAllObjects()
      if let past : NSArray = json["result"].arrayObject as NSArray? {
         print(past)
         for i in 0 ..< (json["result"].arrayObject! as NSArray).count
         {
            self.arrDict.add((json["result"].arrayObject! as NSArray) .object(at: i))
         }
      }
      self.tvJSON.reloadData()
   }
}

Tambahkan code pada CellMobil.swift


//
// CellMobil.swift
// Sewa Mobil
//
// Created by Handoyo on 3/29/18.
// Copyright © 2018 Handoyo. All rights reserved.
//

import UIKit

class CellMobil: UITableViewCell {

@IBOutlet weak var imageMobil: UIImageView!
@IBOutlet weak var labelNama: UILabel!
@IBOutlet weak var labelNopol: UILabel!
@IBOutlet weak var labelHarga: UILabel!
@IBOutlet weak var labelJumlah: UILabel!
@IBOutlet weak var labelSupir: UILabel!

override func awakeFromNib() {
   super.awakeFromNib()
   // Initialization code
}

override func setSelected(_ selected: Bool, animated: Bool) {
   super.setSelected(selected, animated: animated)

   // Configure the view for the selected state
}

func getDataFromUrl(url: URL, completion: @escaping (_ data: Data?, _ response: URLResponse?, _ error: Error?) -> Void) {
   URLSession.shared.dataTask(with: url) {
      (data, response, error) in
      completion(data, response, error)
      }.resume()
}

func downloadImage(_ url: URL){
   getDataFromUrl(url: url) { (data, response, error) in
      DispatchQueue.main.async { () -> Void in
         guard let data = data, error == nil
            else {
               return
         }
         self.imageMobil.image = UIImage(data: data)
      }
   }
}
}

Jangan lupa untuk koneksi ke API mobil.php.

Build / Run Project
Hasil running di Simulator iPhone X

Sekian dulu tutorialnya, selamat mencoba.
Happy Coding 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *