Passing Data in iOS (Swift)

I have the InstantSearch running very similar to the example on github. My next step, as I would assume is natural, would be to pass the data retrieved onto a detailed view controller.

Since it’s in an algolia json object is this what I have to pass? A little confused as to how to save this data into a local variable to display on the next view controller.

So I was able to pass all the data on a first level. However, I’m having trouble with a nested array. I’ve been able to store these urls in an array, but still having issues displaying an image from some of them…really strange

    // MARK: - Collection View Data Source
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "sharkPictureCell", for: indexPath) as! SharkImageCollectionViewCell
    
    let shark = WhaleShark(json: selectedShark!)
    
    cell.imageView.sd_setImage(with: URL(string: (shark.media![indexPath.row])))
    print(shark.media![indexPath.row])

    return cell
}

So I’m getting the first image of 3 images. And if there are 4 images I get the first 2 images?

Hey @phil.manning11,

Can you show me an example of how your JSON result looks like so that I can understand more about the schema and how we can retrieve your images?

Hey @guy.daher,

I’m trying to display each ‘thumb_url’ in the CollectionView.

Here is the JSONObject output…

Optional(["name": Hoadhun, "media": <__NSArrayI 0x60000044be80>(
{
    id = 10031;
    "shark_id" = WS001;
    "thumb_url" = "https://mwsrp-network.org/uploads/sharks/thumbs/WS001/WS001_Hoadhum_LEFT.jpg";
    type = img;
    url = "https://mwsrp-network.org/uploads/sharks/WS001/WS001_Hoadhum_LEFT.jpg";
},
{
    id = 10032;
    "shark_id" = WS001;
    "thumb_url" = "https://mwsrp-network.org/uploads/sharks/thumbs/WS001/WS001_Hoadhum_RIGHT.jpg";
    type = img;
    url = "https://mwsrp-network.org/uploads/sharks/WS001/WS001_Hoadhum_RIGHT.jpg";
},
{
    annotation = "{\"refs\":[[97.30538922155688,136.9760479041916],[253.74251497005986,310.62874251497004],[75.59880239520957,237.2754491017964]],\"refsRaw\":[97.30538922155688,136.9760479041916,253.74251497005986,310.62874251497004,75.59880239520957,237.2754491017964],\"keypoints\":[[106.2874251497006,161.6766467065868,0],[129.49101796407186,182.63473053892216,0],[142.21556886227543,226.04790419161677,0],[110.02994011976047,234.28143712574848,0],[83.08383233532933,243.2634730538922,0],[163.17365269461078,179.64071856287424,0],[193.8622754491018,187.125748502994,0],[198.35329341317365,226.79640718562874,0],[232.78443113772454,241.76646706586826,0],[238.02395209580837,276.1976047904191,0],[154.19161676646706,253.74251497005986,0],[223.80239520958082,208.8323353293413,0]],\"keypointsRaw\":[106.2874251497006,161.6766467065868,129.49101796407186,182.63473053892216,142.21556886227543,226.04790419161677,110.02994011976047,234.28143712574848,83.08383233532933,243.2634730538922,163.17365269461078,179.64071856287424,193.8622754491018,187.125748502994,198.35329341317365,226.79640718562874,232.78443113772454,241.76646706586826,238.02395209580837,276.1976047904191,154.19161676646706,253.74251497005986,223.80239520958082,208.8323353293413],\"meta\":{\"Sex\":-2,\"View\":1},\"comment\":\"\"}";
    id = 11187;
    "shark_id" = WS001;
    "thumb_url" = "https://mwsrp-network.org/uploads/sharks/thumbs/WS001 - Hoadhum/WS001_Hoadhum_LEFT.jpg";
    type = img;
    url = "https://mwsrp-network.org/uploads/sharks/WS001 - Hoadhum/WS001_Hoadhum_LEFT.jpg";
},
{
    annotation = "{\"refs\":[[432.63473053892216,127.9940119760479],[187.125748502994,339.8203592814371],[432.63473053892216,274.7005988023952]],\"refsRaw\":[432.63473053892216,127.9940119760479,187.125748502994,339.8203592814371,432.63473053892216,274.7005988023952],\"keypoints\":[[425.1497005988024,168.4131736526946,0],[368.2634730538922,163.92215568862275,0],[375.748502994012,208.08383233532933,0],[354.0419161676646,266.46706586826343,0],[303.89221556886224,247.00598802395209,0],[303.89221556886224,202.8443113772455,0],[264.2215568862275,282.9341317365269,0],[221.5568862275449,271.7065868263473,0],[195.35928143712573,309.1317365269461,0],[224.5508982035928,214.07185628742513,0],[260.47904191616766,238.77245508982034,0],[387.7245508982036,273.20359281437123,0]],\"keypointsRaw\":[425.1497005988024,168.4131736526946,368.2634730538922,163.92215568862275,375.748502994012,208.08383233532933,354.0419161676646,266.46706586826343,303.89221556886224,247.00598802395209,303.89221556886224,202.8443113772455,264.2215568862275,282.9341317365269,221.5568862275449,271.7065868263473,195.35928143712573,309.1317365269461,224.5508982035928,214.07185628742513,260.47904191616766,238.77245508982034,387.7245508982036,273.20359281437123],\"meta\":{\"Sex\":-2,\"View\":2},\"comment\":\"\"}";
    id = 11188;
    "shark_id" = WS001;
    "thumb_url" = "https://mwsrp-network.org/uploads/sharks/thumbs/WS001 - Hoadhum/WS001_Hoadhum_RIGHT.jpg";
    type = img;
    url = "https://mwsrp-network.org/uploads/sharks/WS001 - Hoadhum/WS001_Hoadhum_RIGHT.jpg";
}
)
, "_highlightResult": {
    name =     {
        matchLevel = none;
        matchedWords =         (
        );
        value = Hoadhun;
    };
    "shark_id" =     {
        matchLevel = none;
        matchedWords =         (
        );
        value = WS001;
    };
}, "last_location": 3.465500, 72.838256, "objectID": 1, "first_location": 3.465500, 72.838256, "first_length": 6, "last_datetime": 2003-12-12 09:20:00, "last_contributor": Manta Trust, "first_datetime": 2003-12-12 09:20:00, "id": WS001, "last_length": 6, "sighting_count": 1, "first_contributor": Manta Trust, "sex": U])

The CollectionView is placed inside a TableViewCell where the pageControl is displaying the correct number of media[“thumb_url”] items per selectedShark.

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
    let shark = WhaleShark(json: selectedShark!)
    
    switch indexPath.section {
    case 0:
        let cell = tableView.dequeueReusableCell(withIdentifier: "imagesCell", for: indexPath) as! SharkImagesTableViewCell
        sharkImagesCell = cell
        cell.pageControl.numberOfPages = (shark.media?.count)!
        return cell

The number of items in each collection view section per selectedShark is also correct

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    let shark = WhaleShark(json: selectedShark!)
    return (shark.media!.count)
}

However when only 1 of 3 or 2 of 4 images are being displayed when setting the images

// MARK: - Collection View Data Source
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "sharkPictureCell", for: indexPath) as! SharkImageCollectionViewCell
    
    let shark = WhaleShark(json: selectedShark!)
    
    cell.imageView.sd_setImage(with: URL(string: (shark.media![indexPath.row])))

    return cell
}

I see. My first impression is that there might be a problem with the thumb urls themselves. I can’t see an obvious reason why you’re getting this weird behaviour. Can please put a breakpoint in the last snippet of code, and then check how many times it’s called (3? 4?) and then from the debugger variable view, get the thumb_url and check on your browser if the image actually exists.

Ahhhhh found it @guy.daher!

A few of the URLs were written as such…
https://mwsrp-network.org/uploads/sharks/thumbs/WS001 - Hoadhum/WS001_Hoadhum_RIGHT.jpg

…with blank spaces :wink:

I changed the URLs in my database so it is working now!
Thanks so much for looking through!
I had spotted it before but didn’t notice when I put the URLs into my browser they changed haha

Any chance you know how to avoid this without manually changing the URLs?

1 Like

@phil.manning11 Glad to hear you found the root problem :slight_smile:

I guess this is more of a data issue on the server side. On the client side, what you could potentially do to react to that is insert a placeholder image in case you can’t fetch a valid image (due to an error).

I found in swift you can call
.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed)
to the end of a string to encode any blank spaces.

Agree on the placeholder image.

Thanks again @guy.daher - really stoked on using Algolia for the first time. Definitely won’t be my last!

@phil.manning11 Good find here!

Happy that you’re excited by Algolia :smiley:. Let us know if you have any feedback :slight_smile: