karl
karl

Reputation: 91

Show an array of objects on List

Array of Tuples

var cardData = [

   Card(deck: "A", message: "Hello" ),
   Card(deck: "B", message: "Bye" )
   Card(deck: "B", message: "Good morning" )

]

NavigationView - I want to show the card of deck "B" only, so I add the if statement. But it shows an empty row on the table view which before the first row of deck "B". How can I fix this bug. Thank you!

        NavigationView {
            List(cardData) { item in

                //Want to filter 
                if item.deck == "B" {

                    NavigationLink(destination:
                        Text("Details")
                    ){
                        Text(item.deck)
                        Text(item.message)
                    }
                }
            }
        }

Upvotes: 0

Views: 328

Answers (2)

LuLuGaGa
LuLuGaGa

Reputation: 14388

What you call an empty row is in fact a NavidationBar. I have added a title to your view to show that. The best way to make sure you are only showing deck "B" is to apply the filtering to the Array as you pass it into List. An Array you pass into List or ForEach needs to either contain items that are Identifiable or you have to explicitly provide which property should be used as an id.

 NavigationView {
     List(cardData.filter{ $0.deck == "B" }, id:  \.message) { card in
         NavigationLink(destination: Text("Details")) {
             Text(card.deck)
             Text(card.message)
         }
     }
     .navigationBarTitle("Deck B")
 }

Upvotes: 1

Joakim Danielson
Joakim Danielson

Reputation: 51851

One solution is to use the filter function together with ForEach

List {
    ForEach(cardData.filter {$0.deck == "B"}) { item in

or just ForEach with an if

List {
    ForEach(cardData) { item in
        if (item.deck == "B") {

Upvotes: 1

Related Questions