从 api 获取 JSON 列表数据答案

【问题标题】：Fetch JSON list data from api从 api 获取 JSON 列表数据
【发布时间】：2018-11-30 09:54:03
【问题描述】：

我正在尝试从返回格式如下的 json 的端点获取问题列表：

[
  {
    "id": 1,
    "question": "text",
    "option1": "text",
    "option2": "text",
    "option3": "text",
    "option4": "text",
    "answer": "text"
  },
  {
    "id": 2,
    "question": "text",
    "option1": "text",
    "option2": "text",
    "option3": "text",
    "option4": "text",
    "answer": "text"
  }
]

按照示例here，我有一个测验课：

class Quiz extends Object with _$QuizSerializerMixin {
  List<Question> questions;

  Quiz(this.questions);

  factory Quiz.fromJson(Map<String, dynamic> json) => _$QuizFromJson(json);
}

和问题类：

class Question extends Object with _$QuestionSerializerMixin {

  final String question;
  final String option1;
  final String option2;
  final String option3;
  final String option4;
  final String answer;

  Question(
      {this.question,
      this.option1,
      this.option2,
      this.option3,
      this.option4,
      this.answer});

  factory Question.fromJson(Map<String, dynamic> json) =>
      _$QuestionFromJson(json);
}

函数定义为：

Future<Quiz> fetchQuiz() async {
  final response = await http.get('json_endpoint.placeholder/questions');

  if (response.statusCode == 200) {
    return Quiz.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load quiz');
  }
}

如何将其传递给新的测验实例？这可能很明显，但我觉得很难。

我尝试过如下声明一个变量：

class QuizScreen extends StatefulWidget {
  @override
  _QuizScreenState createState() => _QuizScreenState();
}

class _QuizScreenState extends State<QuizScreen> {
Question question
String option1
...

Quiz quiz = quiz(fetchQuiz());

@override
void initState() {
super.initState();
question = quiz.nextQuestion;
option1 = question.option1;
...

Quiz quiz = Quiz(fetchQuiz()); 抛出错误。

【问题讨论】：

“给出错误。”请添加完整的错误输出。
这是来自 IDE (Android Studio) 的错误“参数类型 'Future' 不能分配给参数类型 'List'”
看起来您正在尝试将结果从fetchQuiz() 分配给List<Question> questions;，但我在您的问题中看不到这可能发生在哪里。也许那个代码不见了。
是的，我已更新问题以反映我尝试分配它的方式。
上面的代码不包括我在回答中建议的更改。也不清楚什么方法包含Quiz quiz = quiz(fetchQuiz());，也不清楚quiz(...) 是什么或做什么。

标签： dart flutter

【解决方案1】：

代码应该是这样的

Future foo() async {
  Quiz quiz = await fetchQuiz();
}

fetchQuiz() 返回一个Future<Quiz> 并获取值，您使用await，因为包含代码的函数（在我的示例中为foo()）需要被设为async。

【讨论】：

我正在尝试创建一个新对象来保存检索到的数据，然后我用它来填充稍后创建的一些文本小部件。

【解决方案2】：

我认为您正在寻找FutureBuilder。它允许您在 Future 完成时构建 UI。如果snapshot.hasData == true，结果将在snapshot.data。

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: FutureBuilder<Quiz>(
      future: fetchQuiz(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return _buildQuiz(context, snapshot.data);
        } else if (snapshot.hasError) {
          return Text('${snapshot.error}');
        }
        return Center(child: CircularProgressIndicator());
      },
    ));
  }

void _buildQuiz(BuildContext context, Quiz quiz) {

}

【讨论】：