How to load local Json to Flutter DropDown based on other dropdown selection?

Question

I have a local json file and based on the Company name and/or branch name I need to load them in 2 different dropdown list in Flutter.

1) Company DropDown: It will contain/shows List of CompanyName with CompanyCode like;

Example: Company A(01)

2) Branch DropDown: It will contain/shows List of BranchName with BranchCode based on selected Company name like;

Example: First Branch (0001)

My question is I can load local Json file and add to Map but how can I add to List so I can load with dropdown in Flutter?

{  
   "branch":[  
      {  
         "companyCode”:”01”,
         "companyName”:”Comapmy A”,
         "branchCode”:”0001”,
         "branchName”:”First Branch“
      },
      {  
         "companyCode”:”01",
         "companyName”:”Company A”,
         "branchCode”:”0002”,
         "branchName”:”Second Branch”
      },
      {  
         "companyCode”:”02”,
         "companyName”:”Company B”,
         "branchCode”:”0001”,
         "branchName”:”First Branch”
      }
   ]
}


String jsonCompany = await rootBundle.loadString("packages/capi/company.json");
Map _mapCompnay = jsonDecode(jsonCompany);

Solution

Here you have the json Object:

Map _mapCompany = jsonDecode(jsonCompany);

Next , get the array from branch object :

List list = _mapCompany["branch"]; 

that's all , now you can use your list to fill your DropDown:

        DropdownButton<String>(
                      items:list.map((Map val){
                        return DropdownMenuItem<String>(
                          value: val["companyCode"],
                          child: new Text(val["companyName"]),
                        );
                      }).toList(),
                      ...

Comments

[Nick]

thanks, but how can I load second dropdown for branch name based on the selected company name

[diegoveloper]

after you change the first dropdown, get the value and refresh your widget using setState.

[Nick]

I don't know how. If I select Comapmy A I need to load second dropdown with First Branch(001), Second Branch(0002), is it possible to update your answer?

[diegoveloper]

sorry, the question was: 'How to load local Json to Flutter DropDown' , I think my answer cover that question. You should read more about Widgets in Flutter.

[Nick]

thanks, I change my question. Secondly, your code is not what I want. I loads Company 1 twice...

[diegoveloper]

after you parse the list, display the dropdown, then listen the event when you select a value from dropdown, filter the list based on the selection, setState to refresh the widget, and display the another Dropdown based on the filtered list, is not difficult, you just need to read more about Flutter widgets.

[Nick]

thanks I am trying to finalize. But List list = _mapCompany["branch"]; loads first company twice which is in my Json example. I use List<T> uniqifyList<T>(List<T> list) and for loop to remove duplication.

[diegoveloper]

oh yes, sorry, you will have to remove the duplicates and create another list.