UITableView sectioning - ios

Question

I am quite new to creating apps, and I am starting with iOS development with Swift. I really hope that someone will take a bit of time to help me out, because I am rather stuck now. So I am creating an app with a master-detail tableview. I will fetch my data externally using Alamofire, and the returned data will be JSON, which I can parse with SwiftyJSON.
I am able to display the data just fine, that is working fine for me. But what I want to achieve, and what I seem to can't get my head around, is how to divide my items in alphabetical sections with titleForHeaderInSection, and able to navigate around with sectionIndexTitlesForTableView.
The data received from my API looks something like this (The format can be changed, since I control the API):
{
"A": [
{
"id": "1",
"char": "A",
"title": "ABC",
"body": "Denne sang hedder ABC"
},
{
"id": "2",
"char": "A",
"title": "Abel spandabel",
"body": "Denne sang hedder Abel spandabel"
},
{
"id": "3",
"char": "A",
"title": "Aha aha aha",
"body": "Denne sang hedder Aha aha aha"
}
],
"B": [
{
"id": "4",
"char": "B",
"title": "Bussemand",
"body": "Denne sang hedder Bussemand"
},
{
"id": "5",
"char": "B",
"title": "Balademager",
"body": "Denne sang hedder Balademager"
}
],
"D": [
{
"id": "6",
"char": "D",
"title": "Dukke mand",
"body": "Denne sang hedder Dukke mand"
},
{
"id": "7",
"char": "D",
"title": "Dansevisen",
"body": "Denne sang hedder Dansevisen"
}
]
}
Then I have a Song.swift file that defines a struct with some properties for my individual items. I looks something like this:
struct Song {
var title : String
var body : String
var char : String
}
Finally, I have a ViewController that implements the necessary logic in order to draw the tableview with the data returned
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
#IBOutlet weak var songsTableView: UITableView!
var songs = [Song]()
func addSong(song: Song) {
self.songs.append(song)
}
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return songs.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! UITableViewCell
var currentSong = songs[indexPath.row]
cell.textLabel?.text = currentSong.title
return cell
}
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
var nextScreen = segue.destinationViewController as! SingleViewController
if let indexPath = self.songsTableView.indexPathForSelectedRow() {
let selectedSong = songs[indexPath.row]
nextScreen.currentSong = selectedSong
}
}
func getSongs() {
Alamofire.request(.GET, "http://MYAPI.COM")
.responseJSON { (_, _, data, _) in
let json = JSON(data!)
// TODO: Come up with some better names for the "subJson"
for (key: String, subJson: JSON) in json {
// TODO: Come up with some better names for the "subSubJson"
for (key: String, subSubJson: JSON) in subJson {
var title: String = subSubJson["title"].string!
var body: String = subSubJson["body"].string!
var char: String = subSubJson["char"].string!
var song = Song(title: title, body: body, char: char)
self.addSong(song)
}
}
self.songs.sort({$0.title < $1.title})
self.songsTableView!.reloadData()
}
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.getSongs()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
I know that this should probably be text book stuff, but I've been at it for three days now, and I am starting to lose my mind a bit. So I really hope that someone will take their time to help me out here, and address some of the things I might do wrong
Thanks in advance!

Answer 1

For what you want you need to implement 2 delegate methods of tableview:
func tableView(tableView: UITableView, sectionForSectionIndexTitle title: String, atIndex index: Int) -> Int
func sectionIndexTitlesForTableView(tableView: UITableView) -> [AnyObject]!
but you'd need to modify your model a bit to make it more suitable for this kind of sectioning.
If your api returns the data already splitted into sections I'd keep the songs grouped in dictionary like so: var songs:[String:[Song]?] = [:]
then in the api handler I'd do something like:
for (letter, songsJsonForLetter) in json.dictionaryValue {
for songJson in songsJsonForLetter.arrayValue {
var newSong = Song(title:songJson["title"].string!, body: songJson["bopy"].string!, char: letter)
if nil != self.songs[letter] {
self.songs[letter]!.append(newSong)
}else{
self.songs[letter] = [newSong]
}
}
}
this way you'll have the songs parsed directly into a dictionary where the key is the letter ["A",[Song1, Song2, Song3], "D":[Song4, Song5]]...
now all you need to do is to implement the 2 delegates for the table view needed for the section indexing, something like:
func tableView(tableView: UITableView, sectionForSectionIndexTitle title: String, atIndex index: Int) -> Int {
return index
}
func sectionIndexTitlesForTableView(tableView: UITableView) -> [AnyObject]! {
return self.songs.keys.array.sorted{$0 < $1}
}
and of course modify your code that gets the song for index path in the cellForRowAtIndePath to something like:
...
let sectionLetter = sectionIndexTitlesForTableView(tableView)[indexPath.section] as! String
var currentSong = songs[sectionLetter]!.sorted{$0.title<$1.title}[indexPath.row]
...
PS. don't forget to chage also the numberOfSections and rowsForSection to something like:
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return songs.count
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
let sectionLetter = sectionIndexTitlesForTableView(tableView)[section] as! String
return songs[sectionLetter].count
}
hope this helps, gl

Answer 2

In numberOfSectionsInTableView, you'll need to return the number of sections. Maybe that's 26, or maybe you don't want to show blank sections.
In numberOfRowsInSection:, you'll need to return the number of rows for that section. So if section 0 is a, return the number of rows for a.
In cellForRowAtIndexPath:, use the indexPath's row and section properties to return the specific cell.
A good way to start might be to break the data up into arrays, one section per letter.

Answer 3

When you parse the response you will get a dictionary with A, B, ... Z as keys and corresponding details are values. You should implement numberOfSectionsInTableView to return number of keys in this dictionary, numberOfRowsInSection to return number of entires for each Alphabet key and cellForRowAtIndexPath to display proper values.