Put nested JSON in Flutter List and apply search filter on List

Question

I Have Nested JSON List I want to add this list in flutter Widget, I have try it before few days but not found proper solution.

Am sharing with you json Data like below. You can found full json file here

[{
        "month": "July",
        "services": [{
                "name": "Opening Balance",
                "amount": 5566.12
            },
            {
                "name": "Property Rates",
                "amount": 0
            }

        ]
    },
    {
        "month": "August",
        "services": [{
                "name": "Waste Disposal",
                "amount": 0
            },
            {
                "name": "Water Basic",
                "amount": 0
            },
            {
                "name": "Water Metered",
                "amount": 0
            },
            {
                "name": "Interest",
                "amount": 81.63
            },

            {
                "name": "Closing Balance",
                "amount": 6145.05
            }
        ]
    },
    {
        "month": "September",
        "services": [{
                "name": "Opening Balance",
                "amount": 6145.05
            },
            {
                "name": "Property Rates",
                "amount": 107.4
            }

        ]
    },
    {
        "month": "October",
        "services": [{
                "name": "Opening Balance",
                "amount": 6319.27
            },
            {
                "name": "Property Rates",
                "amount": 107.4
            },
            {
                "name": "Sanitation Basic",
                "amount": 0
            },
            {
                "name": "Waste Disposal",
                "amount": 0
            },
            {
                "name": "Water Basic",
                "amount": 0
            },
            {
                "name": "Water Metered",
                "amount": 33.65
            },
            {
                "name": "Interest",
                "amount": 83.04
            },
            {
                "name": "Journal Credit",
                "amount": 0
            },
            {
                "name": "Total",
                "amount": 224.09
            },
            {
                "name": "Closing Balance",
                "amount": 6543.36
            }
        ]
    }

]

I have above string json to dart -> model file here

Expected Result of all list ->

Expected result after search by month name ->

Result after search->

Listview Code:

   ListView.builder(
                  shrinkWrap: true,
                  itemCount: userList.length,
                  itemBuilder: (context, index) {
                    return   ListTile(
                      title: Text(userList[index]['month']),
                      leading:
                          Text(userList[index]['services'][index]['name']),
                      trailing: Text(userList[index]['services'][index]
                              ['amount']
                          .toString()),
                    );
                  },
                ),

Current Result->

Pablo Nicolas Oshiro Mondoñedo · Accepted Answer · 2023-01-18 16:57:13Z

1

First iteration is ok, but you have to iterate again for every month in order to display services...

Try something like this:

ListView.builder(
  shrinkWrap: true,
  itemCount: userList.length,
  itemBuilder: (context, index) {
    return ListTile(
     title: Text(userList[index]['month']),
     subtitle: ListView.builder(
       shrinkWrap: true,
       itemCount: userList[index]['services'].length,
       itemBuilder: (context, index2) {
         return Row(
           children: [
             Text(userList[index]['services'][index2]['name']),
             Text(userList[index]['services'][index2]['amount']),
           ]
          ),
         );
       },
      ),

Regarding the search, you have an example here: Listview filter search in Flutter

Anyway depending on the context of your application I'd suggest you to work with objects and not with maps, and to do the search from the provider and not with a stateful widget.

answered Jan 18, 2023 at 16:57

Pablo Nicolas Oshiro Mondoñedo

1971 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ravindra S. Patil Over a year ago

Pablo Nicolas Oshiro Mondoñedo,I have try your answer its Working Well but what about Search Filter

Ravindra S. Patil Over a year ago

I want search filter on it also its nested JSON and its complicated to me

Ravindra S. Patil Over a year ago

I have Solved issue regarding Search Filter please see above answer given by me

Ravindra S. Patil · Accepted Answer · 2023-01-19 07:25:49Z

I have try it Following Way

Create Lists:

List<SearchList> userList = [];
List<SearchList> search = [];

Search Filter:

 void _runFilter(String enteredKeyword) {
    List<SearchList> results = [];
    if (enteredKeyword.isEmpty) {
      // if the search field is empty or only contains white-space, we'll display all users
      results = userList;
    } else {
      results = userList
          .where((user) =>
              user.month!.toLowerCase().contains(enteredKeyword.toLowerCase()))
          .toList();
      // we use the toLowerCase() method to make it case-insensitive
    }
    // Refresh the UI
    setState(() {
      search = results;
    });
  }

Widget:

Column(
      children: [
        TextField(
          onChanged: (value) {
            _runFilter(value);
          },
          controller: editingController,
          decoration: const InputDecoration(
              labelText: "Search",
              hintText: "Search",
              prefixIcon: Icon(Icons.search),
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(25.0)))),
        ),
        const SizedBox(
          height: 20,
        ),
        search.isEmpty
            ? TextButton(
                onPressed: () {
                  fetchData();
                },
                child: const Text('Load'),
              )
            : Expanded(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: search.length,
                  itemBuilder: (context, index) {
                    return Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(),
                      ),
                      padding: const EdgeInsets.symmetric(
                          horizontal: 10, vertical: 5),
                      margin: const EdgeInsets.symmetric(vertical: 5),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            search[index].month.toString(),
                            style: const TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          ListView.builder(
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount: search[index].services!.length,
                            itemBuilder: (context, index2) {
                              return Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(search[index]
                                      .services![index2]
                                      .name
                                      .toString()),
                                  Text(search[index]
                                      .services![index2]
                                      .amount
                                      .toString()),
                                ],
                              );
                            },
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
      ],
    ),

You Can Found Full Widget Code here

Collectives™ on Stack Overflow

Put nested JSON in Flutter List and apply search filter on List

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related