Scroll list loaded from json on load

I am new to SwiftUI and trying to load a list from a json file which is locally saved. I am able display the json list but I want to scroll it to a specific index in the list.
Following is my code in View:

    struct SignUpEnterPhoneNumberView: View {

    @StateObject private var presenter = CountryListPresenter()
    @State private var searchText = ""
    
    var body: some View {
        VStack {
            NavigationStack {
                ScrollView {
                    ScrollViewReader { proxy in
                        ForEach(presenter.countries, id: \.self) { country in
                            HStack(spacing: 10) {
                                Text(country.emoji ?? "")
                                Text(country.phone)
                                Text(country.name)
                                Spacer()
                            }
                        }
                        .onChange(of: presenter.countries.count, perform: { _ in
                            proxy.scrollTo(30)
                        })
                    }
                }
                .navigationBarTitle(Text("Select Country Code"), displayMode: .inline)
                Spacer()
            }
            .searchable(text: $searchText, prompt: presenter.searchTitle)
        }
    }
}

My presenter file:

    class CountryListPresenter: ObservableObject {
    let navigationTitle: String
    let searchTitle: String
    var countries = [CountryInfoValue]()
    var selectedIndex = 50
    init(
    ) {
        navigationTitle = "Select Country Code"
        searchTitle = "Search"
        fetchCountryList()
    }
    
    func fetchCountryList() {
        guard let url = Bundle.main.url(forResource: "countries.emoji", withExtension: "json") else {
            return
        }
        let data = try? Data(contentsOf: url)
        if let data = data {
            let countryInfo = try? JSONDecoder().decode(CountryInfo.self, from: data)
            var countryList = countryInfo?.map { $0.value }
            countryList = countryList?.sorted(by: { $0.name < $1.name })
            guard let countryList = countryList else {
                return
            }
            countries = countryList
        }
    }
}

I have tried both onAppear and onChange but nothing works for me.

Please try to declare this as

@Published var countries = [CountryInfoValue]()

If you want to listen to changes of field of ObservableObject class you should declare them @Published so they can update listeners when its value changed.

I believe since its not published its empty state is copied to state. And you cant scrollTo item because its empty.

Code below works as intented. I tried to copy your logic there.

struct ContentView: View {
    @StateObject var viewModel = SomeViewMode()
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView {
                ForEach($viewModel.items.indices,id:\.self) { index in
                    ScrollItem()
                        .onAppear {
                            proxy.scrollTo(30)
                        }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}




struct ScrollItem: View {
    var body: some View {
        Rectangle()
            .fill(Color.red)
            .frame(minHeight: 300)
    }
}



class SomeViewMode : ObservableObject {
    
   @Published var items = [Int]()
    
    init() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 5) { [weak self] in
            self?.items = Array(repeating:Int.random(in: 0..<1000), count: 50)
        }
    }
    
}

Try this approach, using ScrollViewReader outside the ScrollView,
and .onChange(...) outside the ScrollView, as shown in the example code.

Also as I said in my comment, use @Published var countries = [CountryInfoValue]()
in your class CountryListPresenter: ObservableObject. Note also, declare your
struct CountryInfoValue: Identifiable and do not use the ,id: \.self in the ForEach loop.

The following example works for me:

struct ContentView: View {
    var body: some View {
        SignUpEnterPhoneNumberView()
    }
}

struct SignUpEnterPhoneNumberView: View {
    @StateObject private var presenter = CountryListPresenter()
    @State private var searchText = ""
    
    var body: some View {
        VStack {
            NavigationStack {
                // for testing
                Button {
                    // to trigger onChange
                    presenter.countries.append(CountryInfoValue(id: presenter.countries.count))
                } label: {
                    Text("go to 30")
                }
                ScrollViewReader { proxy in
                    ScrollView {
                        ForEach(presenter.countries) { country in  // <--- here, no id: \.self
                            HStack(spacing: 10) {
                                Text("\(country.id)")
                                Text(country.emoji ?? "")
                                Text(country.phone)
                                Text(country.name)
                                Spacer()
                            }
                        }
                    }
                    .onChange(of: presenter.countries.count) { _ in
                        withAnimation {
                            proxy.scrollTo(30)  // <--- here
                        }
                    }
                    .navigationBarTitle(Text("Select Country Code"), displayMode: .inline)
                    Spacer()
                }
                .searchable(text: $searchText, prompt: presenter.searchTitle)
            }
        }
    }
}

struct CountryInfoValue: Identifiable, Hashable {  // <-- here, Identifiable
    let id: Int
    var emoji: String? = String(UUID().uuidString.prefix(4))
    var phone = String(UUID().uuidString.prefix(5))
    var name = String(UUID().uuidString.prefix(6))
}

class CountryListPresenter: ObservableObject {
    let navigationTitle: String
    let searchTitle: String
    @Published var countries = [CountryInfoValue]() // <-- here
    var selectedIndex = 50
    
    init() {
        navigationTitle = "Select Country Code"
        searchTitle = "Search"
        fetchCountryList()
    }
    
    func fetchCountryList() {
        // for testing
        for index in 0...40 {
            countries.append(CountryInfoValue(id: index))
        }
    }
}

EDIT-1:

you can easily ...scroll to a row on view load using a .onAppear{...} instead of a Button.
Here is the code that works for me:

struct SignUpEnterPhoneNumberView: View {
    @StateObject private var presenter = CountryListPresenter()
    @State private var searchText = ""

    var body: some View {
        VStack {
            NavigationStack {
                ScrollViewReader { proxy in
                    ScrollView {
                        ForEach(presenter.countries) { country in
                            HStack(spacing: 10) {
                                Text("\(country.id)")
                                Text(country.emoji ?? "")
                                Text(country.phone)
                                Text(country.name)
                                Spacer()
                            }
                        }
                    }
                    .onAppear {
                        withAnimation {
                            // can also look into `.debounce(...)`
                            DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
                                proxy.scrollTo(30)
                            }
                        }
                    }
                    .navigationBarTitle(Text("Select Country Code"), displayMode: .inline)
                    Spacer()
                }
                .searchable(text: $searchText, prompt: presenter.searchTitle)
            }
        }
    }
}