Bind Alamofire request to table view using RxSwift - swift

Question

So I have been researching RxSwift for a couple days, and am trying to create a simple app with it. I have bound the searchController of my table to the results, which feed into the cellForRowAt function. How do I bind the alamofire response to each cell?
Which of these do I need to do?
Use RxAlamofire to create an searchResultsArray
Change searchResultsArray to a Variable and use toObservable?
Bind response or searchResultsArray to create each cell.
The function I need to use is:
.bind(to: self.tableView.rx.items(cellIdentifier: "cell", cellType: UITableViewCell.self)) { row, element, cell in
cell.textLabel?.text = "something"
}
This is my current RxSwift code:
let disposeBag = DisposeBag()
var searchResultsArray = [[String:String]]()
searchController.searchBar.rx.text.orEmpty.filter { text in
text.count >= 3
}.subscribe(onNext: { text in
searchRequest(search: text, searchType: "t:t") { response in
self.searchResultsArray = response
self.tableView.reloadData()
}
}).disposed(by: disposeBag)
This is my current cell creation function. showSearchResults changes when the cancel button is clicked.
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: UITableViewCell = {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell") else {
return UITableViewCell(style: .subtitle, reuseIdentifier: "cell")
}
return cell
}()
if self.shouldShowSearchResults {
cell.textLabel?.text = searchResultsArray[indexPath.row]["result"]!
cell.detailTextLabel?.text = searchResultsArray[indexPath.row]["location"]!
}
return cell
}
This is my current api request:
func searchRequest(search: String, searchType: String, completionHandler: #escaping ([[String: String]]) -> ()) {
let payload: [String: Any] = [
"q": search,
"fq": searchType,
"start": 0
]
let url = URL(string: "https://www.athletic.net/Search.aspx/runSearch")!
Alamofire.request(url, method: .post, parameters: payload, encoding: JSONEncoding.default).responseJSON { response in
let json = response.data
do {
var searchResults: [[String: String]] = []
let parsedJson = JSON(json!)
if let doc = try? Kanna.HTML(html: parsedJson["d"]["results"].stringValue, encoding: .utf8) {
for row in doc.css("td:nth-child(2)") {
let link = row.at_css("a.result-title-tf")!
let location = row.at_css("a[target=_blank]")!
let schoolID = link["href"]!.components(separatedBy: "=")[1]
searchResults.append(["location": location.text!, "result": link.text!, "id":schoolID])
}
}
completionHandler(searchResults)
} catch let error {
print(error)
}
}
}
I would like to replace the cellForRowAt with a RxSwift solution.

Answer 1

Based on the code you presented, use of Rx will give you something like this:
override func viewDidLoad() {
super.viewDidLoad()
searchController.searchBar.rx.text.orEmpty
.filter { text in text.count >= 3 }
.flatMapLatest { text in searchRequest(search: text, searchType: "t:t") }
.bind(to: self.tableView.rx.items(cellIdentifier: "cell", cellType: UITableViewCell.self)) { row, element, cell in
if self.shouldShowSearchResults {
cell.textLabel?.text = element["result"]!
cell.detailTextLabel?.text = element["location"]!
}
}
.disposed(by: disposeBag)
}
The shouldShowSearchResults feels out of place in that. But otherwise it looks good.
The above assumes you wrap your searchRequest in a function that returns an observable like this:
func searchRequest(search: String, searchType: String) -> Observable<[[String: String]]> {
return Observable.create { observer in
searchRequest(search: search, searchType: searchType, completionHandler: { result in
observer.onNext(result)
observer.onCompleted()
})
return Disposables.create()
}
}
The above is a standard pattern that wraps a function that uses a callback into a function that returns an Observable.