UITableView with Sections Repeating cell data in all the sections

Question

I Know same question has been asked before , but it did not help.

I am trying to add section titles to my UITableView. I am able to create the sections and count the number of elements in each section properly, , the cells are repeated the data in all the sections.

I am posting only relevant code -

My model is -

 import UIKit
 struct Product:Equatable {
  let imagename: UIImage }

  var productarray = [Product(imagename:#imageLiteral(resourceName: "CakeImage")),
                Product( imagename:#imageLiteral(resourceName: "PeasImge")),Product(imagename:#imageLiteral(resourceName: "vectorlogo")),
                Product(imagename: #imageLiteral(resourceName: "blue"))]

The ProductViewController is -

 import UIKit

 class ProductViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
 let sections = ["Section A", "Section B","Section C", "Section D"]
 let rowspersection = [1, 1,1,1]
 @IBOutlet weak var tableView: UITableView!
 override func viewDidLoad() {
    super.viewDidLoad()
    tableView.delegate = self
    tableView.dataSource = self   
 }
 func numberOfSections(in tableView: UITableView) -> Int {
   return sections.count
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
         return rowspersection[section]
    }

  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
     let data = productarray[indexPath.row]
     let cell = tableView.dequeueReusableCell(withIdentifier: "ProductTableViewCell") as! ProductTableViewCell
     cell.imageView?.image =  data.imagename
     cell.myParent = self
       return cell
  }

   func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 44
}
   func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    switch(section) {
    case 0:return "Section A"
     case 1:return "Section B"
    case  2:return "Section C"
    case  3 :return "Section D"
    default :return ""
        
    }
  }
}

Now, in the above only the first image of the productarray i.e. "[Product(imagename:#imageLiteral(resourceName: "CakeImage"))," is repeated in all the sections as shown in the image below:-

I want all the images/cell to be in the respective sections and not just one image/cell to be repeated in all the sections.

Any help will be appreciated.

Answer 1

in every section indexPath start with zero so it display first index of productarray.

let data = productarray[indexPath.row]

replace with

let data = productarray[indexPath.row + indexPath.section]

Edit

var index = indexPath.row
if indexPath.section != 0, rowspersection.count > indexPath.section - 1{
   index += rowspersection[indexPath.section - 1] 
}
if index < productarray.count{
  let data = productarray[index]
  cell.imageView?.image =  data.imagename
}

Edit Checkout Replace this methods

func updateCart(cell: ProductTableViewCell) {
    guard let indexPath = tableView.indexPath(for: cell) else { return }
    var index = indexPath.row
    if indexPath.section != 0, rowspersection.count > indexPath.section - 1{
        index += rowspersection[indexPath.section - 1]
    }
    
    if index < productarray.count{
        let product = productarray[index]
        
        //Update Cart with product
        cart.updateCart(with: product)
        self.navigationItem.rightBarButtonItem?.title = "Checkout (\(cart.items.count))"
    }
    
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell   {
    let cell = tableView.dequeueReusableCell(withIdentifier: "ProductTableViewCell") as!   ProductTableViewCell
    cell.delegate = self // original issue was here, now resolved.
    
    var index = indexPath.row
    if indexPath.section != 0, rowspersection.count > indexPath.section - 1{
        index += rowspersection[indexPath.section - 1]
    }
    
    if index < productarray.count{
        let data = productarray[index]
        cell.name?.text = data.name
        cell.imageView?.image =  data.imagename
        
        let product = productarray[index]
        cell.setButton(state: self.cart.contains(product: product))
    }
    
    return cell
}

Answer 2

Reason:

Since you've a single row in each section, everytime you use indexPath.row which is 0 for the 1st row, you end up accessing productarray[0] for each row in every section.

That's the reason all the rows are same because all of them are filled with productarray[0].

Solution:

Simply use indexPath.section instead of indexPath.row

let data = productarray[indexPath.section]

---

Note: Instead of making 3 different arrays, you can create a single array of custom type and use that as the dataSource of your tableView. Example:

struct Section {
    let name: String
    let products: [Product]
}

let sections = [
    Section(name: "Section A", products: [Product(imagename:#imageLiteral(resourceName: "CakeImage"))]),
    Section(name: "Section B", products: [Product(imagename:#imageLiteral(resourceName: "PeasImge"))]),
    Section(name: "Section C", products: [Product(imagename:#imageLiteral(resourceName: "vectorlogo"))]),
    Section(name: "Section D", products: [Product(imagename:#imageLiteral(resourceName: "blue"))]),
]

Use sections array as the dataSource. This will avoid a lot of confusion.