我如何从json链接填充数据到在Flutter中创建的自定义模型

Question

我正在创建一个应用程序，其中一个部分是测验。我已经在Heroku和AWS S3上正确地设置了Strapi V4 CMS。

在CMS中，我创建了一个适当的5个问题的集合，它们的选项和答案选项。

在Flutter Project中，我创建了一个自定义问题模型，如下所示:

class QuestionModel {
String? question;
Map<String, bool>? answers;
QuestionModel(this.question, this.answers);
}
List<QuestionModel> questions = [
QuestionModel(
"Q1?",
{
"opt1": bool1,
"opt2": bool2,
"opt3": bool3,
"opt4": bool4,
},
),
QuestionModel(
"Q2?",
{
"opt1": bool1,
"opt2": bool2,
"opt3": bool3,
"opt4": bool4,
},
),
QuestionModel(
"Q3?",
{
"opt1": bool1,
"opt2": bool2,
"opt3": bool3,
"opt4": bool4,
},
),
QuestionModel(
"Q4?",
{
"opt1": bool1,
"opt2": bool2,
"opt3": bool3,
"opt4": bool4,
},
),
QuestionModel(
"Q5?",
{
"opt1": bool1,
"opt2": bool2,
"opt3": bool3,
"opt4": bool4,
},
),
];

在我的主文件中，我直接将List命名为"questions"，并相应地放置了所有条件。

现在，这些是硬编码的值。我想从Strapi &在List 'questions'中填充它们，不需要在main.dart文件中做任何更改。

这就是我所期望的:

class QuestionModel {
String? question;
Map<String, bool>? answers;
QuestionModel(this.question, this.answers);
}
Future 'get function()' {
var data = api call;
}
List<QuestionModel> questions = [
QuestionModel(
"data[1].Q1?",
{
"data[1].opt1": data[1].bool1,
"data[1].opt2": data[1].bool2,
"data[1].opt3": data[1].bool3,
"data[1].opt4": data[1].bool4,
},
),
QuestionModel(
"data[2].Q2?",
{
"data[2].opt1": data[2].bool1,
"data[2].opt2": data[2].bool2,
"data[2].opt3": data[2].bool3,
"data[2].opt4": data[2].bool4,
},
),
QuestionModel(
"data[3].Q3?",
{
"data[3].opt1": data[3].bool1,
"data[3].opt2": data[3].bool2,
"data[3].opt3": data[3].bool3,
"data[3].opt4": data[3].bool4,
},
),
QuestionModel(
"data[4].Q4?",
{
"data[4].opt1": data[4].bool1,
"data[4].opt2": data[4].bool2,
"data[4].opt3": data[4].bool3,
"data[4].opt4": data[4].bool4,
},
),
QuestionModel(
"data[5].Q5?",
{
"data[5].opt1": data[5].bool1,
"data[5].opt2": data[5].bool2,
"data[5].opt3": data[5].bool3,
"data[5].opt4": data[5].bool4,
},
),
];

Answer 1

让API返回以下JSON，以便更容易遍历条目:

[
{
"question": "Q1?",
"options": [
{"option": "opt1", "value": false},
{"option": "opt2", "value": false},
{"option": "opt3", "value": false},
],
},
{
"question": "Q2?",
"options": [
{"option": "opt1", "value": false},
{"option": "opt2", "value": false},
{"option": "opt3", "value": false},
{"option": "opt4", "value": false},
],
},
{
"question": "Q3?",
"options": [
{"option": "opt1", "value": false},
{"option": "opt2", "value": false},
],
},
]

填充questions的代码是这样的:

QuestionsResponse responseData = await api.getQuestions();
List<Question> questionsData = responseData.questions;
List<QuestionModel> questions = [
for (final question in questionsData)
QuestionModel(
question.question,
{for (final option in question.options) option.option: option.value},
),
];

本例中questionsData来自QuestionsResponse.questions。这反过来又来自QuestionsResponse.fromJson()调用。

class Question {
final String question;
final List<Option> options;
Question({required this.question, required this.options});
Question.fromJson(Map<String, dynamic> json)
: question = json['question'],
options =
(json['options'] as List).map((o) => Option.fromJson(o)).toList();
Map<String, dynamic> toJson() => {
"question": question,
"options": options.map((o) => o.toJson()),
};
}
class Option {
final String option;
final bool value;
Option({required this.option, required this.value});
Option.fromJson(Map<String, dynamic> json)
: option = json['option'],
value = json['value'];
Map<String, dynamic> toJson() => {
"option": option,
"value": value,
};
}
class QuestionsResponse {
final List<Question> questions;
QuestionsResponse({required this.questions});
QuestionsResponse.fromJson(Map<String, dynamic> json)
: questions =
(json['questions'] as List).map((o) => Question.fromJson(o)).toList();
Map<String, dynamic> toJson() => {
"questions": questions.map((o) => o.toJson()),
};
}

Answer 2

您可以使用factory方法来实现这一点。

class QuestionModel {
String? question;
Map<String, bool>? answers;
QuestionModel(this.question, this.answers);
factory QuestionModel.fromJson(Map<String, dynamic> json) {
return QuestionModel(
question: json['question'],
answers: json['answers']);
}
}

并将其命名为

QuestionModel.fromJson(json);