获取 json 数据并创建一个列表答案

【问题标题】：fetching json data and creating a list获取 json 数据并创建一个列表
【发布时间】：2021-08-03 17:04:07
【问题描述】：

我目前正在学习 Flutter，我正在自己创建一个应用程序...... 所以目前的问题是我需要获取 json 数据并将其放入列表中，在本例中为 listOfCards （自定义对象 Card 包含 initialSearch 作为字符串和results 作为列表。我一直在关注这个例子https://flutter.dev/docs/cookbook/networking/background-parsing#convert-the-response-into-a-list-of-photos，但是他们直接将数据解析到应用程序中，我真的不知道如何在我的情况下使用它。我需要填写这个 listOfCards 列表，以便稍后在应用程序中使用它。代码如下：

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,
    );
  }
}

【问题讨论】：

标签： json list flutter

【解决方案1】：

自定义类

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;
  }
}

使用Json to dart生成

将响应存储为 Card 对象

Card _card = Card.fromJson(responsebody);

您的响应 JSON

{
    "initialSearch": "Google",
    "mostPopularSearches": [
        "Google",
        "Facebook",
        "Stacjoverflow",
        "Reddit"
    ]
}

【讨论】：