download images from url to image array and show in table view swift

Question

I am facing trouble getting image from my json url.

this is my json:

"bank_details": [
    {
        "id": 1,
        "logo": "http://mortgagemarket.ae/webApi/public/mortgage_bank_icons/noorebank.png",
        "name": abc company

    }
]

my swift code to parse the image is this:

import UIKit
class BanksViewController: UIViewController, UITableViewDelegate,UITableViewDataSource {

final let BANKS_URL = "http://www.mortgagemarket.ae/webApi/api/manage_interest_rates"
    @IBOutlet weak var tableView: UITableView!

var bankicon = [String]()
var bankname = [String]()
var bankid = [Int]()

let stringid: String = ""

override func viewDidLoad() {
    super.viewDidLoad()

    self.displayFromDb()
    tableView.dataSource = self
    tableView.delegate = self


}



func displayFromDb()
{
    let tokensp = UserDefaults.standard.string(forKey: "tokenKey")
    let url = NSURL(string: BANKS_URL+"?token="+tokensp!)

    print(url)
    URLSession.shared.dataTask(with: (url as?URL)!, completionHandler: {(data,response,error) ->
        Void in

        if let jsonObj = try? JSONSerialization.jsonObject(with: data!, options: .allowFragments) as? NSDictionary
        {

            print(jsonObj.value(forKey: "bank_details")!)

            if let messageArray = jsonObj.value(forKey: "bank_details") as? NSArray
            {
                print(jsonObj.value(forKey: "bank_details")!)

                for message in messageArray
                {
                    if let messageDict = message as? NSDictionary
                    {

                        if let data = data {


                            if let bankname = messageDict.value(forKey: "bank_name")
                            {
                                self.bankname.append(bankname as! String)
                                print(bankname)

                            }


                            if let banklogo = messageDict.value(forKey: "logo")
                            {

                                self.bankicon.append(banklogo as! String)
                                print(banklogo)

                            }

                            if let bankid = messageDict.value(forKey: "id")
                            {
                                self.bankid.append(bankid as! Int)
                                print(bankid)

                            }

                            OperationQueue.main.addOperation({
                                self.tableView.reloadData()
                            })

                        }
                    }

                }

            }

        }


    }).resume()

}


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

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! BanksTableViewCell



  cell.bankicon.image = bankicon[indexPath.row] as? UIImage
    cell.bankname.text = bankname[indexPath.row]


    return (cell)

}

}

now When I run this code it is showing blank table cells. I dont know how to get image from url and display the images in table view cell. Please someone help me. this is my whole code to get the all the json data into table view cell. Please someone help me

The JSON is invalid: `Error: Parse error on line 1: "bank_details": [{ "logo": "http: --------------^ Expecting 'EOF', '}', ',', ']', got ':'` — BraveButter, Jun 26 '19 at 11:32
ack, I wish STACKOVERFLOW was more helpful. good question on your end. — jbiser361, Jan 31 '21 at 04:30

PGDev · Answer 1 · 2019-06-26T10:23:23.170

0

imageicon[indexPath.row] gives a urlStringand not the instance ofUIImage. You need to fetch the image from server using this urlString.

Use URLSession to fetch the image from server like,

if let url = URL(string: imageicon[indexPath.row]) {
    URLSession.shared.dataTask(with: url) { (data, response, error) in
        if let data = data {
            DispatchQueue.main.async {
                cell.imageicon.image = UIImage(data: data)
            }
        }
    }.resume()
}

edited Jun 26 '19 at 10:23

answered Jun 26 '19 at 10:21

PGDev

23,751
6
34
88

this isn't a recommended approach as this will kepp downloading the same image multiple times when scroll – Shehata Gamal Jun 26 '19 at 10:22
It can definitely be saved in the cache or the model. That totally depends upon the OP whether he wants to do that or not. Question is not about caching the downloaded image. – PGDev Jun 26 '19 at 10:25
this is not showing the image :( – john Doe Jun 27 '19 at 07:56
Check if you're getting any error. – PGDev Jun 27 '19 at 07:57
1

Check if the URL that you're using is a valid one. – PGDev Jun 27 '19 at 08:06
url is fine because i am getting names. – john Doe Jun 28 '19 at 09:47
Can you show the url that you're getting? – PGDev Jun 28 '19 at 09:48

emrcftci · Answer 2 · 2019-07-01T10:42:39.127

Your models should be like this:

/// Your response models
struct BankDetails: Codable {
    let bank_details: [ImageUrl]
}

struct ImageUrl: Codable {
    let logo: String
}

And then in your cell:

class MyCell: UITableViewCell {
    /// create dataTask for cancel in prepareForReuse function
    private var dataTask: URLSessionDataTask?

    /// Like this
    override public func prepareForReuse() {
        super.prepareForReuse()
        dataTask?.cancel()
    }

    func populate(with model: YourModel) {
        /// You should set url in indexPath of your logo array([ImageUrl])
        let url = model.url /// It's sample url for explain this is an url of your current index model
        if let imageUrl = url {
            downloaded(from: imageUrl)
        }
    }

    func downloaded(from url: URL, contentMode mode: UIView.ContentMode = .scaleAspectFit) {
        contentMode = mode
        dataTask = URLSession.shared.dataTask(with: url) { data, response, error in
            guard
                 let httpURLResponse = response as? HTTPURLResponse, httpURLResponse.statusCode == 200,
                 let mimeType = response?.mimeType, mimeType.hasPrefix("image"),
                let data = data, error == nil,
                let image = UIImage(data: data)
                else { return }
            DispatchQueue.main.async() {
                self.yourImageView.image = image
            }
        }
        dataTask?.resume()
    }
}

In your Controller's tableView cellForRowAt function:

let model = models[indexPath.row]
cell.populate(with: model)

return cell

You can use the above models, and create displayFromDb like this:

func displayFromDb() {
    let tokensp = UserDefaults.standard.string(forKey: "tokenKey")
    let url = NSURL(string: BANKS_URL+"?token="+tokensp!)

    if let myUrl = url {
        URLSession.shared.dataTask(with: myUrl) { (data, response , error) in      
        guard let data = data else { return }
        do {
            let decoder = JSONDecoder()
            let data = try decoder.decode(BankDetails.self, from: data)
            print("my logo array is: \(data.bank_details)")
            // TODO: - So you get urls 

        } catch let err {
            print("Err", err)
        }
    }.resume()
    }

}

`bank_details` and `logo` are not `imageUrls` and `url` this won't deocde — Shehata Gamal, Jun 26 '19 at 10:33
@johnDoe Please share your final code for better understanding. We can solve this issue together :) — emrcftci, Jun 27 '19 at 08:01
Hi @johnDoe please check my edit and don't hesitation for ask question. Let's solve this problem. — emrcftci, Jun 27 '19 at 11:10
can you paste the code for my model class here,Because I have never used one before. @EmreCiftci — john Doe, Jul 01 '19 at 08:48
Please check my edit @johnDoe. If you have any questions please ask immediately. Enjoy. — emrcftci, Jul 01 '19 at 10:43

download images from url to image array and show in table view swift

2 Answers2