How to extract JSON from a List in Flutter?

Question

I'm trying to display a ListView.builder from a list where data came from Firestore. I get and store my datas like this

List filterMangaList = [];
Future getFavMangas() async {
    var value = await firestore.collection("users").doc(user.uid).get();
    final favMangasList = value.data()?["fav_manga"];
    filterMangaList.clear();
    for (var i in favMangasList) {
      final mangas = await FirebaseFirestore.instance
          .collection('mangas')
          .where('title', isEqualTo: i)
          .get();
      final filterManga = mangas.docs.map((doc) => doc.data()).toList();
      filterMangaList.add(filterManga);
    }
    return filterMangaList;
  }

The list I want to extract data is filterMangaList who looks like this

[[{total_chapter: 361, pic: https://images.pexels.com/photos/213780/pexels-photo-213780.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500, title: My Hero Academia}], [{total_chapter: 700, pic: https://images.pexels.com/photos/213780/pexels-photo-213780.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500, title: Naruto}]]

And my ListView.builder looks like this

FutureBuilder(
  future: getFavMangas(),
  builder: (context, AsyncSnapshot future) {
    if (!future.hasData)
      return Container();
    else {
      var filterMangaList = future.data;
      print(filterMangaList);
      return ListView.builder(
        shrinkWrap: true,
        itemCount: filterMangaList.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Text(filterMangaList[index]["title"]),
          );
        },
      );
    }
  }),

but I have this error:

_TypeError (type 'String' is not a subtype of type 'int' of 'index')

I think it is because I have one too much [] but I don't know how to resolve this problem.

user_209103 · Answer

You actually have one [] too few in your code.

This is your data structure

[
  [{
    total_chapter: 361,
    pic: "https: //images.pexels.com/photos/213780/pexels-photo-213780.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    title: My Hero Academia
  }],
  [{
    total_chapter: 700,
    pic: "https://images.pexels.com/photos/213780/pexels-photo-213780.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    title: Naruto
  }]
]

So it's an array of arrays with properties. That's because you have a list of results for each query.

To get the data from the above structure, you can do:

child: Text(filterMangaList[index][0]["title"]),

But that will only show the first result of each query, which is probably not what you want.

To see all the results of all the queries, you have to add them to a flat list instead of a nested list. A simple way to do that is:

filterMangaList.addAll(filterManga);

With that change your filterMangaList contains a flat list of all results from all queries, that you can then display in the ListView with your orignal code.

How to extract JSON from a List in Flutter?

1 Answers