arraysswiftui-listxcode12grouped-list

Grouped List in SwiftUI importing data from swift file


I can create grouped lists in SwiftUI using the following code:

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Freyr / Freya's Aett")) {
                
            }
            Section(header: Text("Heimdall's Aett")) {
                
            }
            Section(header: Text("Tyr's Aett")) {
                
            }
            Section(header: Text("Additional Runes")) {
                
            }
        }.listStyle(GroupedListStyle())
    }
}

I have a separate swift file which stores the data in Arrays but I can't get it to import into my list like I was able to when I used the following code in Storyboards.

import Foundation
import SwiftUI

struct Rune: Identifiable {
    var runeName: String
    var runeImage: String
    var runeDescription: String
    let id = UUID()
}

//MARK: - Runes Array Standard Orientation

var runeTitle = [["Freyr/Freya's Aett"], ["Heimdall's Aett"], ["Tyr's Aett"], ["Additional Runes"]]

let runesArray = [[Rune(runeName: "Fehu", runeImage: String(("Fehu")), runeDescription: "Description Goes Here")],

                   [Rune(runeName: "Hagalaz", runeImage: String(("Hagalaz")), runeDescription: "Description Goes Here")],

                  [Rune(runeName: "Tiwaz", runeImage: String(("Tiwaz")), runeDescription: "Description Goes Here")],

                  [Rune(runeName: "Blank Rune", runeImage: String(("Blank")), runeDescription: "Description Goes Here")]]

Solution

  • You just need a way to identify what goes in each section. This particular way is quite inefficient because it runs through each item in the runesArray for each section but you can visualize what is going on and then work on your data.

    import SwiftUI
    
    struct SectionedList: View {
        var body: some View {
            List {
                Section(header: Text(runeTitle[0][0])) {
                    ForEach(runesArray, id: \.id){rune in
                        if rune.runeTitle == runeTitle[0][0]{
                            Text(rune.runeName)
                        }
                    }
                }
                Section(header: Text(runeTitle[1][0])) {
                    ForEach(runesArray, id: \.id){rune in
                        if rune.runeTitle == runeTitle[1][0]{
                            Text(rune.runeName)
                        }
                    }
                }
                Section(header: Text(runeTitle[2][0])) {
                    ForEach(runesArray, id: \.id){rune in
                        if rune.runeTitle == runeTitle[2][0]{
                            Text(rune.runeName)
                        }
                    }
                }
                Section(header: Text(runeTitle[3][0])) {
                    ForEach(runesArray, id: \.id){rune in
                        if rune.runeTitle == runeTitle[3][0]{
                            Text(rune.runeName)
                        }
                    }
                }
                //This is another way to do it.
                /*
                ForEach(0..<runeTitle.count){idx in
                    Section(header: Text(runeTitle[idx][0])) {
                        
                        ForEach(runesArray, id: \.id){rune in
                            if rune.runeTitle == runeTitle[idx][0]{
                                Text(rune.runeName)
                            }
                        }
                    }
                }
                */
            }.listStyle(GroupedListStyle())
        }
    }
    struct Rune: Identifiable {
        var runeName: String
        var runeImage: String
        var runeDescription: String
        var runeTitle: String
        let id = UUID()
    }
    
    //MARK: - Runes Array Standard Orientation
    
    var runeTitle = [["Freyr/Freya's Aett"], ["Heimdall's Aett"], ["Tyr's Aett"], ["Additional Runes"]]
    
    let runesArray = [Rune(runeName: "Fehu", runeImage: String(("Fehu")), runeDescription: "Description Goes Here", runeTitle: runeTitle[0][0]),
                      
                      Rune(runeName: "Hagalaz", runeImage: String(("Hagalaz")), runeDescription: "Description Goes Here", runeTitle: runeTitle[1][0]),
                      
                      Rune(runeName: "Tiwaz", runeImage: String(("Tiwaz")), runeDescription: "Description Goes Here", runeTitle: runeTitle[2][0]),
                      
                      
                      Rune(runeName: "Blank Rune", runeImage: String(("Blank")), runeDescription: "Description Goes Here", runeTitle: runeTitle[3][0])]
    

    I added runeTitle to your Rune structure.