Can't properly set image from JSON in tableView cell - json

Question

I have to get crytocurrencies logos and set them in tableView cell. JSON has the following structure
"data": {
"1": {
"id": 1,
"name": "Bitcoin",
"symbol": "BTC",
"logo": "https://s2.coinmarketcap.com/static/img/coins/64x64/1.png",
},
"2": {
"id": 2,
"name": "Litecoin",
"symbol": "LTC",
"logo": "https://s2.coinmarketcap.com/static/img/coins/64x64/2.png"
...}
This's my model:
struct Data: Decodable {
let data: [String: Id]
}
struct Id: Decodable {
let logo: String
}
According to documentation I can fetch logos for cryptocurrencies by adding ids to this URL: https://pro-api.coinmarketcap.com/v1/cryptocurrency/info?id=1,2,3,4,5... Since I need top 100 currencies, I'm getting them this way and then sending through Notification to TableViewController.
class NetworkManager {
func loadData() {
let ids = (1...100).map { String($0) }.joined(separator: ",")
guard let baseURL = URL(string: "https://pro-api.coinmarketcap.com/v1/cryptocurrency/info?id=\(ids)") else {
print("Wrong URL")
return
}
let finalURL = baseURL
var request = URLRequest(url: finalURL)
request.addValue("MyApiKey", forHTTPHeaderField: "X-CMC_PRO_API_KEY")
let dataTask = URLSession.shared.dataTask(with: request) { (data, response, error) in
if let jsonData = data {
do {
let cryptoLogo = try JSONDecoder().decode(Data.self, from: jsonData)
NotificationCenter.default.post(name: .getLogos, object: cryptoLogo)
}
catch {
print(error)
}
}
}
dataTask.resume()
}
}
To display logos I'm using ImageView extension:
extension UIImageView {
func imageFromUrl(urlString: String) {
if let url = URL(string: urlString) {
let task = URLSession.shared.dataTask(with: url) { data, response, error in
guard let data = data, error == nil else { return }
DispatchQueue.main.async() {
self.image = UIImage(data: data)
}
}
task.resume()
}
}
}
The problem is that I can print logo URLs, but can't set them properly in tableView cell. Could you please say what did I do wrong? What also worries me, it's that I get logos in not ascending order as I get in Postman. How can I sort string logos array?
#objc func getLogo(notification: Notification) {
if let responce = notification.object as? Data {
for value in responce.data.values {
data.append(value)
}
}
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let crypto = data[indexPath.row]
if let cell = tableView.dequeueReusableCell(withIdentifier: "imageCell", for: indexPath) as? TableViewCell {
cell.imageCell.imageFromUrl(urlString: crypto.logo)
return cell
}
return UITableViewCell()
}

Answer 1

Use KingFisher or SDWebImage to load image from url. Just one line of code
cell.imgView.sd_setImage(with: URL(string: ""))
SDWebImage provides us to cache images automatically

Answer 2

By loading your images like so, you'll run into issues where images are being loaded in the wrong cell due to:
the time required to load them,
your images not being cached,
your cells being dequeued as you scroll but the associated loading tasks not being cancelled.
If you dynamically load images in a TableView, I strongly recommend that you use a library like KingFisher to easily load and cache your images, and cancel requests as cells are being dequeued.
With KingFisher imported, you can create a extension like so:
public extension UIImageView {
func loadKingfisherImage(url: String) {
self.kf.cancelDownloadTask()
self.kf.indicatorType = .activity
self.kf.setImage(with: ImageResource(downloadURL: URL(string: url)!, cacheKey: url)) { result in
switch result {
case .success(let value):
print("Task done for: \(value.source.url?.absoluteString ?? "")")
case .failure(let error):
print("Failed to load image: \(error.localizedDescription)")
}
}
}
}
Usage :
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let crypto = data[indexPath.row]
if let cell = tableView.dequeueReusableCell(withIdentifier: "imageCell", for: indexPath) as? TableViewCell {
cell.imageCell.loadKingfisherImage(url: crypto.logo)
return cell
}
return UITableViewCell()
}
Refer to https://github.com/onevcat/Kingfisher/wiki/Cheat-Sheet if you need more features.