Hey everyone, I hope you are doing good. Let’s go ahead and improve our JSON Parse Xcode project and add some more features to it. This article will teach you how to grab image URL and show it into the view controller and open a segue view controller if the user clicks on one of the cells in the table view.

First, of everything, we would require grabbing album art from the JSON response that we get from the Spotify API. It gives the album details as an album object and then images array in it. The images array consist of multiple sizes and have data like URL, width, and height. You can choose whichever you think the best from the array but for this article, we would choose the second one that is smaller in size and aspect ratio too. One critical thing to mention is that don’t forget to update your OAUTH token in headers array because that might have been expired if you are following this article one day after you created the token. If you don’t do it then you won’t be able to receive any JSON response from the Web API itself. The following link is to the GIT branch that has all the updates that we have mentioned in this article.

https://github.com/kheniparth/TechMuzzJsonParser/compare/feature/update-controller…feature/add-thumbnail-and-click-action

Please follow the steps listed below to add mentioned feature to your project. Feel free to ask your queries or any error that you are not able to solve during the implementation in the comment section below.

1) Reopen our Xcode workspace

reopen xcode workspace project

2) Let’s edit the default cell in our table-view too have one image view and a text label as shown below.

add imageview and label into tableview cell

You can add constraints to the component so they look the same in appearance even though they are different actually.

imageview constraints xcode

You can also set the aspect ratio equal to the thumbnail would be square in shape but it is all up to you how you want your app to look like.

aspect ratio of imageview xcode

The GIT repo has all the constraints updates too if you would like to follow the same settings as ours. Some of the constraints that we have applied to the cell components are shown as below.

xcode component constraints

3) Add Tags too Lable and Image-view that we created as 1 and 2 respectively. By this way, we can identify them programmatically and assign values to them.

text lable tag xcode

imageview tag xcode

4) Now add the code after the logic of grabbing track name from the item object as mention below and show in the image too

The first line would get the album component of item object. After that, we will fetch images from that album object and image URL from the images array. you can choose different images by giving different index while accessing images array. At the end, we append the image and label to Post struct that we created to hold post values like:

To access this structure we need to modify our names array from array of String to array of Post like below.

    var posts = [Post]()

Don’t worry if these changes created some errors in the code because as you need to update all the occurrences of names array with posts as you have replaced the array type and name. Please follow our updates in GIT to solve the errors.

JSON parse xcode

5) If you try to run the app, it would look like below. Amazing isn’t it.

app output xcode

6) But it won’t be able to open a detail view controller on click of a cell because we didn’t create it yet. To do that let’s add some views and update the controller. First, add a navigation controller at the beginning of the storyboard as below.

navigation controller in xcode

Then remove the default UI view controller and attach our old view controller to it. If you don’t know how to do it then, first select the array and controller that comes with navigation controller and delete it. Then drag a ctrl + click from navigation controller to our old controller and choose root view controller as shown below. You would have 2 arrows to

root view controller xcode

You would have 2 arrows to old view controller. Choose the simple arrow and drag it to the navigation controller, by this way the navigation controller will become the init view controller and app would start from there.

update init controller xcode

You would have 2 arrows to the old view controller. Choose the simple arrow and drag it to the navigation controller, by this way the navigation controller will become the init view controller and app would start from there.

7) Add a new view controller to storyboard.

view controller xcode

You can customize this view as you would like. Add an image-view that covers whole view controller and add constraints with respect to view controller like these:

imageview constraints xcode

The end result would look like below. Update the Content mode as Aspect fill to show the image as the background of the view controller.

aspect fill xcode image view

Add a visual effect with view blur and cover the whole image-view that we added recently so it would like a blur image background. You can also give some constraints so it always covers the whole background.

add visual effect view blur xcode

8) Let’s add segue from our table view to this new view controller by dragging ctrl + click from cell to the new controller and select show from the options menu.

segue between 2 controllers xcode

9) Let’s add one more class AudioVC that will controller action and components into our new view controller. Create a new swift file from File > New > File

create new swift file xcode

Add One image view and label that we would use to show song information in the detail view controller.

add imageview and label to view controller xcode

Update the class of new view-controller in the storyboard to newly created class (AudioSwift). Create new outlets into AudioVC class using assistant editor so we can access the controller component programmatically.

create outlets xcode

10) The final result would look something like this.

track detail view xcode

11) There is one thing that should be done before we wrap this article. If you have noticed that some extra image when you try to go back from detail view controller to table view. To cut the extra background image. Enable Clip to bounds under view > drawing as shown below to solve the issue.

clip to bounds xcode

12) That’s about it 🙂

Please feel free to ask any doubts or queries that you might have faced while implementing the above steps in the comment section below. We would be glad to help you.

Thank you and Stay Techie…