How to Search data from api list

[atta1234]

here is my data list from api

  Future<String> getSWData() async {
    var res = await http .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    var resBody = json.decode(res.body);

    setState(() {
      data = resBody;
    });

    return "Sucess";
  }
`
```
and here is my dropdown 

 ```
 children: <Widget>[
             SearchableDropdown.single(
             hint:Text("Select Country"),
              isExpanded: true,
          items: data.map((item) {
            return  DropdownMenuItem(
             
              child:  Text(item['name']),
              value: item['id'].toString(),
            );
      
          }).toList(),
          onChanged: (newVal) {
            setState(() {
              _countryname = newVal;
              city.clear();
              _myState=null;
              this.getCity(int.parse(_countryname));
            });
          },
          value:_countryname,
        ),
         ],
```

it's load data from api but when i search i m not getting search data is there is any extra step for search? the package should be dynamic like jquery select2

[lcuis]

Hi @atta1234 ,

For the API part of your question, I'm not sure whether this is a similar request to #44 . Maybe not.

However, looking at your code, for the search to work, you would need to put either the text or an object which toStringfunction returns the text in the value argument of the DropdownMenuItem:

            return  DropdownMenuItem(
              child:  Text(item['name']),
              value: item['name'],
            );

[atta1234]

Hi @atta1234 ,

For the API part of your question, I'm not sure whether this is a similar request to #44 . Maybe not.

However, looking at your code, for the search to work, you would need to put either the text or an object which toStringfunction returns the text in the value argument of the DropdownMenuItem:

            return  DropdownMenuItem(
              child:  Text(item['name']),
              value: item['name'],
            );

Great that's worked but what about id i need id of that data in value i want to pass t to other function

[lcuis]

Indeed, it is more practical, reliable and efficient to get the id than retrieve it afterwards from the texts list.

To solve this elegantly, I see two main possibilities:

1. do so that your items are made of objects with item.id being the id (for example) and item.toString() to return the text.
2. handle the search through searchFn function that you would give as an argument. searchFn could try to match the keyword against the text corresponding to the received id.

Feel free to ask for more explanation if needed.

[atta1234]

i m completely new to flutter and your help will much appreciated in this matter, as you said
to make the value string and i did that and now the search working,
return DropdownMenuItem(
child: Text(item['name']),
value: item['name'].toString(),
);

      }).toList(),
      onChanged: (newVal) {
        setState(() {
          _countryname = newVal;      
          print(newVal);       
        });
      },
      value:_countryname,

but somehow i don't know how i will get the id now i really need that id to pass to the city function to get related city,,you said above but i did not got that

[lcuis]

Hi @atta1234 ,

No worries. I understand.

Give me some time to prepare some examples for you.

[lcuis]

Here is a first example with an object that returns the text when toString() function is called (first solution):

//...
class Country{
  String name;
  int id;
  Country(this.name,this.id);
  toString(){
    return(name);
  }
}
//...
class _MyAppState extends State<MyApp> {
static final String countriesJson = '[{"id":0,"name":"Afghanistan"},{"id":1,"name":"Albania"},{"id":2,"name":"Algeria"},{"id":3,"name":"Angola"}]';
List<Country> countries;
List<DropdownMenuItem<Country>> countriesDropdownItems;
Country selectedCountry;

  @override
  void initState() {
    countries=(jsonDecode(countriesJson) as List<dynamic>).map<Country>((e) => Country(e['name'],e['id'])).toList();
    countriesDropdownItems = countries.map<DropdownMenuItem<Country>>((e) => DropdownMenuItem(child:Text(e.name),value:e,)).toList();
    super.initState();
}

  @override
  Widget build(BuildContext context) {
    return(
    //...
    SearchableDropdown.single(
        items: countriesDropdownItems,
        value: selectedCountry,
        hint: "Select one country",
        searchHint: "Select one country",
        onChanged: (value) {
          setState(() {
            selectedCountry = value;
          });
        },
        isExpanded: true,
      )
    //...
    );
  }
}

If I try to adapt this to your example, it gives me the following:

//...
class Country{
  String name;
  int id;
  Country(this.name,this.id);
  toString(){
    return(name);
  }
}
//...
List<DropdownMenuItem<Country>> countriesDropdownItems;
Country selectedCountry;
 Future<String> getSWData() async {
    var res = await http .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    var resBody = json.decode(res.body);
List<Country> countries=(resBody as List<dynamic>).map<Country>((e) => Country(e['name'],e['id'])).toList();
    setState(() {
      data = resBody;//I don't think this is necessary anymore at least for the searchable_dropdown
    countriesDropdownItems = countries.map<DropdownMenuItem<Country>>((e) => DropdownMenuItem(child:Text(e.name),value:e,)).toList();
    });

    return "Sucess";
  }

//and here is my dropdown 

 children: <Widget>[
             SearchableDropdown.single(
             hint:Text("Select Country"),
              isExpanded: true,
          items: countriesDropdownItems,
          onChanged: (newVal) {
            setState(() {
              selectedCountry = newVal;
              _countryname = newVal.name;
              city.clear();
              _myState=null;
              this.getCity(int.parse(_countryname));
            });
          },
          value:selectedCountry,
        ),
         ],

Please let me know if you need another example with the second solution (searchFn).

[atta1234]

is this model class is necessary class Country{
String name;
int id;
Country(this.name,this.id);
toString(){
return(name);
}
}

i just don't want to make my code rush

[atta1234]

you have added to much List<DropdownMenuItem> lis list ,, my code was straight forward and understandable

[atta1234]

can' we get the id in set state or something session etc

[atta1234]

the above code will work for default country drop down but will become more complex for state and city as i m get state after the value change

[lcuis]

In object oriented programming, having a class to model a business entity such as a country is rarely considered as having rush code IMHO.

My intention was not to make the code less understandable but keep it both efficient and understandable.

As long as you can access the selectedCountry object, you can access the selectedCountry id:

print("selected country id: ${selectedCountry.id}");

In order to avoid getting a null exception when no country is selected, you could do it this way:

print("selected country id: ${selectedCountry?.id??'none selected'}");

I understand that you need the same to be applied for state and city. I also understand that the list of states will need to change when the selected country changes and that the list of cities will change as soon as another state is selected. Is there something that makes you think there could be an issue with this?

Would you like me to try and prepare a searchFn based example and see if you like it better?

[atta1234]

ok thanks i will try to implement it,yes you are right but have tried that model class before and the snapshot etc in dropdown was a pain,
i just have this List data = List(); //line
and after jsondecode i assign data to this list,,,so i m free from that map string etc thing,,,, same for city on change i just assign the values to city and that's working with very less code

[lcuis]

I was tempted to give you the same example with less lines of code but it would have made it less understandable.

Building a list of dropdown menu items in the build function - while you may find it more elegant and I understand it - makes the conversion run more often than needed and is in fact less efficient. Also, my personal experience showed me a more stable behavior with the list of dropdown menu items defined outside the build function.

Now, if you really prefer using the data variable the way it was in your original example, it is possible through the use of the searchFn argument. Are you sure you don't want an example based on this?

[atta1234]

ok thanks sir you have already help a lot ,God bless you!

[lcuis]

I'm glad if that helped! I wish you the best!

Closing for now. Feel free to reopen if needed.

[atta1234]

`import 'package:flutter/material.dart';
import 'package:foodfromforeign1/models/country.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:searchable_dropdown/searchable_dropdown.dart';

void main() => runApp( MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: 'Flutter Demo',
      theme:  ThemeData(
        primarySwatch: Colors.red,
      ),
      home:  MyHomePage(title: 'Users'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() =>  _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 final String url = "http://10.0.2.2/fff/api/allcountries/";
List<DropdownMenuItem<Country>> countriesDropdownItems;
Country selectedCountry;
 Future<String> getSWData() async {
    var res = await http .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    var resBody = json.decode(res.body);
List<Country> countries=(resBody as List<dynamic>).map<Country>((e) => Country(e['name'],e['id'])).toList();
    setState(() {
    countriesDropdownItems = countries.map<DropdownMenuItem<Country>>((e) => DropdownMenuItem(child:Text(e.name),value:e,)).toList();
    });

    return "Sucess";
  }

    @override
  void initState() {
    super.initState();
  }

@override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar:  AppBar(
        title:  Text(widget.title),
      ),
      body:Container(
          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 30),
        child:Column(
         children: <Widget>[
             SearchableDropdown.single(
             hint:Text("Select Country"),
              isExpanded: true,
          items: countriesDropdownItems,
          onChanged: (newVal) {
            setState(() {
              selectedCountry = newVal;
              selectedCountry = newVal.name;
            
            });
          },
          value:selectedCountry,
        ),
         ],

        ),  
      


        
      ),
    );
  
  }
}


`

i m getting this error EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (14412): The following assertion was thrown building MyHomePage(dirty, state: _MyHomePageState#9dafd):
I/flutter (14412): 'package:searchable_dropdown/searchable_dropdown.dart': Failed assertion: line 313 pos 16: 'items !=
I/flutter (14412): null': is not true.

[atta1234]

_TypeError (type 'String' is not a subtype of type 'int') for this line as well

List countries=(resBody as List).map((e) => Country(e['name'],e['id'])).toList();

that's why i was using that few line of code

[lcuis]

Hello @atta1234 ,

I'm not sure whether you are saying that you still have an issue or whether you solved your issue in your last comment. Can you please clarify?

[atta1234]

Leave sir i am going to for vue native this is just basic issue and spend whole day for it so i m sure flutter will has more issue ahead in more advance topic ,so better to not waste more time int it

[lcuis]

Sorry you reached this conclusion. I hope you'll have all desired success with vue native.

[taufiqridha]

Thanks implented on given solutions to make "toString to my Class" worked. i tried searchFn before, but more than efficient and elegant toString.

Thanks for great plugins @lcuis.
@atta1234 let me know if you still have problems.

[atta1234]

Thanks implented on given solutions to make "toString to my Class" worked. i tried searchFn before, but more than efficient and elegant toString.

Thanks for great plugins @lcuis.
@atta1234 let me know if you still have problems.

i have problem with index value 0 or 1 ,,i have used , other plugin by the way are you implementing country state city dropdown?

[taufiqridha]

@atta1234 what are you asking is still this plugins ? or another plugins which is country state ?
if so i can't answer your question, this related to searchable plugins.
If still this plugins, read through your comment before, please add your returned data to model class first as @lcuis suggested, after this then let me know your code if there still any problems.
also i thought if you follow this #49 (comment) was clear and should solve your problems

[lcuis]

To reply on the title of this issue:

Since version 2.0.4 and later, the SearchChoices plugin supports pagination and Future/network/API/webservice calls.
The example is meant to work with PHP-CRUD-API based webservice using a non-web Flutter client. However, the example can be adapted for many other situations.
https://github.com/lcuis/search_choices#single-dialog-paged-future