fetching json data and creating a list - json

Question

I'm currently studying flutter and I'm creating an app on my own...
So the problem at the moment is that I need to fetch json data and to put it in the list, in this case listOfCards (custom made object Card contains initialSearch as String and results as List. I've been following this example https://flutter.dev/docs/cookbook/networking/background-parsing#convert-the-response-into-a-list-of-photos but there they are directly parsing data into app and I really didn't know how to use it in my case.
I need to fill this listOfCards List to use it later in the app.
So here's the code:
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
List<Card> listOfCards = [];
Future<List<Card>> fetchCards(http.Client client) async {
final response = await client.get(
Uri.parse('605a2f18b11aba001745dbdd.mockapi.io/api/v1/cards'),
);
return parseCards(response.body);
}
List<Card> parseCards(String responseBody) {
final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
return parsed.map<Card>((json) => Card.fromJson(json)).toList();
}
class Card {
String initialSearch;
List<String> mostPopularSearches;
Card({
this.initialSearch,
this.mostPopularSearches,
});
factory Card.fromJson(Map<String, dynamic> json) {
return Card(
initialSearch: json['search'] as String,
mostPopularSearches: json['results'] as List,
);
}
}

Answer 1

Custome class
class Card {
String initialSearch;
List<String> mostPopularSearches;
Card({this.initialSearch, this.mostPopularSearches});
Card.fromJson(Map<String, dynamic> json) {
initialSearch = json['initialSearch'];
mostPopularSearches = json['mostPopularSearches'].cast<String>();
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['initialSearch'] = this.initialSearch;
data['mostPopularSearches'] = this.mostPopularSearches;
return data;
}
}
Generated using Json to dart
To store the responses as Card object
Card _card = Card.fromJson(responsebody);
Your response JSON
{
"initialSearch": "Google",
"mostPopularSearches": [
"Google",
"Facebook",
"Stacjoverflow",
"Reddit"
]
}