Parsing JSON effectively in Flutter/Dart - flutter

Question

How to extract a pair of values out of a JSON using dart
This is the function I have so far:
This is the JSON:
{
"displayNames": [
"John Doe",
"Chloé Kamgang",
"Lady Testing of Tarth"
],
"users": [
{
"uid": "1tcPRqNZ7wexX2DWa11V9Ay1zES2",
"displayName": "John Doe"
},
{
"uid": "aZg7Emp8H9W42irnM73NBdTe6YM2",
"displayName": "Chloé Kamgang",
"photoURL": "https://firebasestorage.googleapis.com/v0/b/atalaku-fcf9e.appspot.com/o/Profilescaled_1e189635-0bc0-4791-ba20-6aded7ad3e8f7210544.jpg621jpg?alt=media&token=f5cffac3-a20c-4a83-8241-4fab16a9bd66"
},
{
"uid": "hXzyTuDE8eafnSxITmz7ZdMQDnw1",
"displayName": "Lady Testing of Tarth",
"photoURL": "https://firebasestorage.googleapis.com/v0/b/atalaku-fcf9e.appspot.com/o/Profilescaled_image_picker8162975920.jpg645jpg?alt=media&token=269007d1-09ee-4fe4-b7ad-72aa7cea756a"
}
]
}
And this is the function:
Future<List<Map<String, dynamic>>> getProfilesBySuggestion(
String sSuggestion) async {
try {
List<Map<String, dynamic>> listToReturn = [];
if (sSuggestion == null ||
sSuggestion.isEmpty ||
!sSuggestion.startsWith('#')) return listToReturn;
//Getting all the names
Map<String, dynamic> listUsers = await getAllUsers();
if (listUsers == null) return listToReturn;
//Returning only the names corresponding
List<dynamic> listNames = listUsers['displayNames'];
for (String name in listNames)
if (name
.toLowerCase()
.startsWith(sSuggestion.substring(1).toLowerCase())) {
List<Map<String, dynamic>> listOfusers = listUsers['users'] as List<Map<String, dynamic>>;
Map<String, dynamic> rightOne = listOfusers.firstWhere((user) => user['displayName'] == name);
String sPhotoURL = rightOne['photoURL'];
print('** name = $name, photoURL = $sPhotoURL');
listToReturn.add({'name': name, 'photoURL': sPhotoURL});
}
return listToReturn;
} catch (error) {
print('*** Error During getProfilesBySuggestion: ${error.toString()}');
return [
{'errorMessage': error.toString()}
];
}
}
What I want is a list of pair (name, photoURL). I am using the flutter_typeahead plugin, I want to display a list of names and their respective avatars. As you can see, I am using Firebase. Please let me know if there is a better option as well, as this will get pretty heavy with scale. Thank you!

Answer 1

A good starting point when working with data that's not organised the way you want it, is to re-organize it. I'd merge the two lists adding the display name to each user. But, of course, you see immediately that that's not necessary as each user already contains their display name. (The displayNames branch of your json is unnecessary for your purposes.)
So, you can just work with the users branch. Note that what you are doing is extracting the members of the users list and subtly changing the tag name (from displayName to name - leaving photoURL the same). Is the tag name change necessary? If not you could basically achieve what you want with a single where.
That said, this should achieve what you want (including the tag name change):
Future<List<Map<String, dynamic>>> getProfilesBySuggestion(
String sSuggestion) async {
try {
if (sSuggestion == null ||
sSuggestion.isEmpty ||
!sSuggestion.startsWith('#')) return [];
//Getting all the names
Map<String, dynamic> allUsers = await getAllUsers();
if (allUsers == null) return [];
//Returning only the names corresponding
List<dynamic> users = allUsers['users'];
var suffix = sSuggestion.substring(1).toLowerCase();
return users
.where((user) => user['displayName'].toLowerCase().startsWith(suffix))
.map<Map<String, dynamic>>((user) => {
'name': user['displayName'],
'photoURL': user['photoURL'],
})
.toList();
} catch (error) {
print('*** Error During getProfilesBySuggestion: ${error.toString()}');
return [
{'errorMessage': error.toString()}
];
}
}

Answer 2

A good starting point when working with data that's not organised the way you want it, is to re-organize it.
And if that's not an option, you can still mitigate the impact. It's always easier to work with plain old dart classes than json, so I'd encourage you to map the json to classes.
I usually use package:built_value for that. There is a tool that helps map json:
https://charafau.github.io/json2builtvalue/ Careful, it's not 100%. Eg. it will not include photoUrl field if you just copy-paste your json.
Basically, I'd take the json.users, and map it to objects. Make sure to make photoUrl optional.
Once that's done, you can create any lookup table you want. You could just have a List<User> to iterate over names and photoUrls, or you could create a Map<String, User> to look up users by their name.
Tip: class Map has got a number of constructors that you can work with.