QuerySnapshot: Storing Firebase Collection Documents into Local List

[Andrew Villegas]

Hi Community,

I'm trying to read a Collection using a QuerySnapshot, and store these values in a List.

I'm currently Reading my whole collection successfully with the following 

Future<void> getData() async {
// Get docs from collection reference
QuerySnapshot querySnapshot = await productoComplementos.get();

// Get data from docs and convert map to List
final allData = querySnapshot.docs.map((doc) => doc.data()).toList();

print(allData);
}

@override
void initState() {
// TODO: implement initState
super.initState();
getData();
}

-------------------------------------------------------------------------

And I'm getting the desired output printed in the console. But how can I store these documents in a local list(List<Componente> componentes = [];)???

My idea is to store these documents in componentes so I can edit this 'internal' list.

Just in case, here's my Componente() model:

class Componente {
String nombre;
String precio;
String urlimagen;
}

Any guidance would be helpful. Thanks!

--Best,

A.V.

[Suzuki Tomohiro]

Just convert documents to Componentes. Do you see any challenge to do this?

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/c1609ee4-8893-4e0d-94e8-287ee47aebe5n%40googlegroups.com.

[Andrew Villegas]

Hi Suzuki,

Thanks for your response. 

Yes, I do find this a bit challenging/ confusing at this moment. I'm trying all sorts of things to convert this QuerySnapshot into a list<My Model>, but haven't had any luck yet.

After declaring my List <Componente> componentes= [ ];      

, this is what I'm trying but I'm still stuck. 

I'm still printing the 'allData' though. My challenge is is in this conversion. 

  Future<void> getData() async {
// Get docs from collection reference
    QuerySnapshot querySnapshot = await productoComplementos.get();

// Get data from docs and convert map to List
    final allData = querySnapshot.docs.map((doc) => doc.data()).toList();

    componentes = (json['products'])
        .map((c) => Componente.fromJson(c))
        .cast<Componente>()
        .toList();

    print(allData);
  }

dI'm still printing the 'allData' though. My challenge is is in this conversion. I'm also looking at the FlutterFire docs, but the example there pretty much does what I already have (printing the data), but no examples beyond that.

FirebaseFirestore.instance
    .collection('users')
    .get()
    .then((QuerySnapshot querySnapshot) {
        querySnapshot.docs.forEach((doc) {
            print(doc["first_name"]);
        });
    });
Any guidance would be awesome. Thanks!

[Suzuki Tomohiro]

Print componentes. What does that show?

[Andrew Villegas]

Yes! I got it to work and can finally print my new list<my Class>. Thank you!

(I'm not sure whether I should post a follow-up question here, or a separate question). 

But now instead of printing my data from this List<Componente>componente, I want to build a ListView.builder using this newly created list. 

So far, when I try and build this ListView.builder, I get that the 'The getter 'length' was called on null.' 

And I think that this happens because the ListView is called first, with an initial value of null, and THEN I'm converting my QuerySnapshot into my <Componente> componentes List. 

What I don't get, though, is why this error happens even as I have this function initialized inside my initState()??

Shouldn't it build properly since I'm initializing the List and converting my list here?

Thanks for your help :) 

--A.V.

And here's what I have and I'm trying just in case. 

  Future<void> getData() async {

    QuerySnapshot querySnapshot = await productoComplementos.get();

    List<Componente> componentes = querySnapshot.docs
        .map(
          (doc) => Componente.fromMap(
            doc.data(),
          ),
        )
        .toList();
    print(
      componentes,

[Andrew Villegas]

I just noticed it's a bit hard to read my previous code, so I copied it here with a better color !

[Suzuki Tomohiro]

> why this error happens even as I have this function initialized inside my initState()

It’s because Future and async calls are not executed immediately. Use FutureBuilder.

[Andrew Villegas]

Thanks Suzuki. That's what I thought but good to be 100% sure about that now!