Flutter How to List Array with multiple children from JSON

Question

i have a difficult time to parsing a value from json. i would like to create a ListView Builder with expansion and have a children inside expansion. i mean like below

Sample i want

but i don't how to parsing all children based on the type. for detail sql table and query please check below :

[
{
    "ID_Type": "1",
    "Type": "Food",
    "Item": [
        {
            "SLU_Number": "3",
            "SLU_Name": "Food"
        }
    ]
},
{
    "ID_Type": "2",
    "Type": "Beverages",
    "Item": [
        {
            "SLU_Number": "1",
            "SLU_Name": "Non Alcohol"
        },
        {
            "SLU_Number": "2",
            "SLU_Name": "Alchohol"
        }
    ]
}

]

i watch some video and follow the suggestion and i create a new dart file with new class called ListType.dart

here the code

class Products {
  final ID_Type;
  final Name_Type;
  final Items;

  Products({
    this.ID_Type,
    this.Name_Type,
    this.Items,
  });

  factory Products.fromJson(Map<String, dynamic> json) {
    return Products(
      ID_Type: json["ID_Type"],
      Name_Type: json["Type"],
      Items: Item.fromJson(json["Item"]),
    );
  }
}

class Item {
  final SLU_Number;
  final SLU_Name;

  Item({
    this.SLU_Number,
    this.SLU_Name,
  });

  factory Item.fromJson(Map<String, dynamic> json) {
    return Item(
      SLU_Number: json["SLU_Number"],
      SLU_Name: json["SLU_Name"],
    );
  }
}

but since the video throw the value to list so i dont know to throw the json value to ListView.Builder.

here below how i usually throw to List View Builder

//------------------------------Start Syntax for List SLU
  final listslu = new List<ListSLU>();
  final GlobalKey<RefreshIndicatorState> _refreshlistslu =
      GlobalKey<RefreshIndicatorState>();


  Future<void> ListSLUs() async {
    listslu.clear();
    setState(() {
      loading = true;
    });
    try {
      final response = await http.get(BaseUrl.ListSLU);
      if (response.contentLength == 2) {
      } else {
        final data = jsonDecode(response.body);
        data.forEach((api) {
          final b = new ListSLU(
            api['ID_Type'].toString(),
            api['SLU_Number'].toString(),
            api['SLU_Name'].toString(),
          );
          listslu.add(b);
          print(api['SLU_Name'].toString());
        });
      }
    } catch (e) {
      print("Error List SLU :");
      print(e);
    }
  }
  //------------------------------End Syntax for List Type

here below i throw to body based on future async i created above

Expanded(
              flex: 2,
              child: ListView.builder(
                itemCount: listslu.length,
                itemBuilder: (context,i){
                  final z = listslu[i];
                  return GestureDetector(
                    onTap: (){

                    },
                    child: Container(
                      child: Column(
                        children: <Widget>[
                          Row(
                            children: <Widget>[
                          Row(
                          children: <Widget>[
                          Text(z.SLU_Number +' - '+ z.SLU_Name),
                        ],
                      ),
                            ],
                          )
                        ],
                      ),
                    ),
                  );
                }
              )
          ),

please your advice.

Solution

It should be possible to use where() on items to filter them, and then use map() to convert each row of json to ListTile()

ExpansionTile(
   ...
   children: jsonData
      .where((row) => row["ID_Type"] == listtypes[i].ID_Type)
      .map((row) =>
         ListTile(
            title: Text(row["SLU_Name"])
         )
      )
)

Comments

[Ski]

Very blurry picture, code can be copy-pasted into gist.github.com or any other pastebin - much better than a screenshot.

[Kart Zhai]

please review my code

[Kart Zhai]

i have edit my thread. could you help me, i want all value from json result throw to Listview.builder.

[Nabin Dhakal]

Please help me with this stackoverflow.com/questions/60432234/…