Json Data and DisclosureGroup

Hello everyone, if you can give suggestions for the final project it would be appreciated. Is there a way to parse JsonData into the DisclosureGroup using the foreach function, if possible? The disclosure group part is in the GroupDetailView and I plan to reuse this view into the LDListView, since I already have a JSON File. The group members and percentage are hidden in the disclosure that says the group name such as “ITZY” or “IVE”. Thank you and have a nice day!

GDrive Link:

The screenshot shows the intended output. I tried using the ForEach function but the output became blank. Feel free to ask questions iff possible!

I got rid of anything related to JSON for now, since it is complicated for me.

@cistiii

Hi Gian,

I downloaded your project and initially could not figure out what the issue was but then it dawned on me what you needed to do to make it work.

You were on the right track and so close.

From the project you shared, the changes you need to make are as follows:

In LDListView.swift I changed the code to this:

struct LDListView: View {
    
    @State var kpops = [Kpop]()
    let dataService = DataService()

    var body: some View {

        NavigationStack {
            
            ScrollView (showsIndicators: false) {
                VStack {

                    ForEach(kpops) { item in
                        GroupDetailView(kpop: item, detail: item.detail)
                    }
                }
            }
            .padding(.horizontal)
            
        }
        .onAppear {
            kpops = dataService.getFileData()
        }
        
    }
}

In GroupDetailView I changed the code to this:

struct GroupDetailView: View {
    
    let kpop: Kpop
    let detail: [Detail]

    struct ToggleStates {
        var oneIsOn: Bool = false
        var twoIsOn: Bool = true
    }
    @State private var toggleStates = ToggleStates()
    @State private var topExpanded: Bool = true
//    @State var kpops = [Kpop]()
    
    
    var body: some View {
        ScrollView (showsIndicators: false) {
            VStack {
                DisclosureGroup ((kpop.group), isExpanded: $topExpanded) {
                    ForEach(detail) { item in
                        HStack {
                            Text(item.name)
                            Spacer()
                            Text(item.perc)
                        }
                    }
                    .padding(.horizontal)
                }
            }
        }
    }
}

#Preview {
    GroupDetailView(kpop: Kpop(group:"IVE", detail:[]), detail: [Detail(name: "Liz", perc: "14%")])
}

I also added a 3rd entry in the json file to match the example screenshot you provided.

[
    {
        "group": "ITZY",
        "detail": [
            {
                "name": "Lia",
                "perc": "12.335%"
            },
            {
                "name": "Yeji",
                "perc": "12.22%"
            }
        ]
    },
    {
        "group": "IVE",
        "detail": [
            {
                "name": "Liz",
                "perc": "14.065%"
            },
            {
                "name": "Yujin",
                "perc": "13.665%"
            }
        ]
    },
    {
        "group": "Kiss Of Life",
        "detail": [
            {
                "name": "Belle",
                "perc": "33.3%"
            },
            {
                "name": "Natty",
                "perc": "26.5%"
            },
            {
                "name": "Julie",
                "perc": "20.5%"
            },
            {
                "name": "Hanuel",
                "perc": "19.7%"
            }
        ]
    }
]

Let me know how you go with those changes.

1 Like

Hi Sir Chris Parker! Thank you very much for sharing! Although I am still able to run my project without JSON, I will save your reply in the future as reference in case JSON is needed. Hope it helps!