Display items from nested array in SwiftUI

Question

I'm trying to decode Yelp's JSON. Within the file there's a nested array of categories. Some businesses have 1, others may have 3.

Here's an example

{
"businesses": [
    {
        "id": "4jW-ZDeCPIl9aXvTWcATlA",
        "alias": "the-delaney-hotel-orlando",
        "name": "The Delaney Hotel",
        "image_url": "https://s3-media2.fl.yelpcdn.com/bphoto/fikUF4yC5J63f3EOCZ8uOw/o.jpg",
        "is_closed": false,
        "url": "https://www.yelp.com/biz/the-delaney-hotel-orlando?adjust_creative=s-hyKAjsx6P4UW-uqMn7aQ&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=s-hyKAjsx6P4UW-uqMn7aQ",
        "review_count": 13,
        "categories": [
            {
                "alias": "hotels",
                "title": "Hotels"
            },
            {
                "alias": "venues",
                "title": "Venues & Event Spaces"
            }
        ],
        "rating": 5.0,
        ...etc
    }
    
]

My data model is set up this way

struct BusinessesResponse: Codable {
    enum CodingKeys: String, CodingKey {
        case restaurants = "businesses"
    }

    let restaurants: [RestaurantResponse]
}

struct RestaurantResponse: Codable, Identifiable, Equatable {
    let id: String
    var name: String
    var image_url: String
    var is_closed: Bool
    var review_count: Int
    var rating: Double
    var distance: Double
    var price: String?
    var display_phone: String?
    var categories: [HotelCategory]
    var coordinates: HotelCoordinates
    var location: HotelLocation
    var transactions: [String]   
}

struct HotelCategory: Hashable, Codable {
    var title: String
}

struct HotelCoordinates: Hashable, Codable {
    var latitude: Double
    var longitude: Double
}

struct HotelLocation: Hashable, Codable {
    var address1: String
    var city: String
    var state: String
    var zip_code: String
}

I'm able to display everything other than the first pair in the categories array. My guess is that I would need to set a ForEach statement to display all available information from that array, but I'm not sure how to set that up correctly.

Here's what I have currently in abbreviated form

var category: [HotelCategory]


var body: some View {
    HStack {
       Text("\(category[0].title)")
    }
 } 

Obviously that would only return the first child of that nested array. How would I dynamically account for that nested array having multiple children and then displaying them?

Answer 1

You can use ForEach this way:

ForEach(category, id: \.self) { category in
    HStack {
        Text("\(category.title)")
    }
}

Note: if you're not sure that categories are unique, it might be better to conform HotelCategory to Identifiable and use id: \.id.

---

I'd also recommend following the convention and naming arrays with plural names, i.e.:

var categories: [HotelCategory] // instead of `category`