如何在 Flutter 中解析这个 JSON 数组？

Posted 2023-02-23

【中文标题】如何在 Flutter 中解析这个 JSON 数组？

【英文标题】：How to parse this JSON Array in Flutter?

【发布时间】：2019-12-27 06:14:29

【问题描述】：

我正在使用 Flutter，目前正在尝试创建图表。我希望从下面的链接中解析这个 JSON 数组。我的问题是“价格”对象中提供的信息，值都在数组本身内部。我想获取这些值并将它们拆分为 X 和 Y 列表，但我不知道如何实现这一点。我在下面发布了 JSON 数据的 sn-p。

https://api.coingecko.com/api/v3/coins/bitcoin/market_chartvs_currency=usd&days=1

我只熟悉通过创建类和构造函数来解析数据。然后创建一个fromJSON(Map<String, dynamic> json) 类并将数据放入一个列表中，如下面的代码 sn-p 所示，该代码是我从另一个带有对象值的 URL 创建的。我该如何将这个数组 JSON 数据解析为两个列表数据？

解析 JSON 的代码

List<Coins> _coins = List<Coins>();
Future<List<Coins>> fetchCoins() async 
var url = 'URL';
var response = await http.get(url);

var coins = List<Coins>();

if (response.statusCode == 200) 
  var coinsJSON = json.decode(response.body);
  for (var coinJSON in coinsJSON) 
    coins.add(Coins.fromJson(coinJSON));
  

return coins;
 

@override
void initState() 
fetchCoins().then((value) 
  setState(() 
    _coins.addAll(value);
  );
);
super.initState();


class Coins
String symbol;
String name;

Coins(this.symbol, this.name);

Coins.fromJson(Map<String, dynamic> json) 
symbol = json['symbol'];
name = json['name'];

JSON 数据片段

"prices":[
  [
     1566344769277,
     10758.856131083012
  ],
  [
     1566345110646,
     10747.91694691537
  ],
  [
     1566345345922,
     10743.789313302059
  ],
]

编辑：在@EJABU 的帮助下解决。

class HistoricalData 
 List prices;
 List<num> listX = [];
List<num> listY = [];

HistoricalData(this.prices,this.listX, this.listY);

HistoricalData.fromJson(Map<String, dynamic> json) 
prices = json['prices'];
for (var price in prices) 
  listX.add(price[0]);
  listY.add(price[1]);
 

【参考方案1】：

自动生成序列化程序

我建议你看看https://pub.dev/packages/json_serializable，这是一个为你生成样板代码的包。虽然将这样的内容添加到您的代码或工作流程中可能有点矫枉过正，但自动生成序列化程序非常方便。

并不是说为了拥有自定义子类，它们也需要提供序列化。

如果你想进一步扩展你的知识，你也可以看看https://pub.dev/packages/built_value和https://pub.dev/packages/built_value_generator

【参考方案2】：

你可以试试这个……

新类Coins定义：

class Coins 
  List<num> listX = [];
  List<num> listY = [];

  Coins(this.listX, this.listY);

  Coins.fromJson(Map<String, dynamic> json) 
    List<List<num>> prices = json['prices'];
    for (var price in prices) 
      listX.add(price[0]);
      listY.add(price[1]);
    
  

然后你可以通过这些行获取它：

// Future<List<Coins>> fetchCoins() async  // Remove This
Future<Coins> fetchCoins() async 
  var url = 'URL';
  var response = await http.get(url);

  // var coins = List<Coins>(); // Remove This
  Coins coins;

  if (response.statusCode == 200) 
    var coinsJSON = json.decode(response.body);

    // Remove This
    // for (var coinJSON in coinsJSON) 
    //   coins.add(Coins.fromJson(coinJSON));
    // 
    //
    coins = Coins.fromJSON(coinsJSON);
  
  return coins;

在小部件中访问数据

在 Widgets 中，我们预期的变量作为 property 在 Coins 类中。

例如，如果你使用 FutureBuilder，你可以使用这些行：

child: FutureBuilder(
  future: fetchCoins(),
  builder: (_, __) 
    return SomeChartWidget(
      listX: coins.listX,
      listY: coins.listY,
    );
  ,
),

【讨论】：

如何定义？当使用coins.listX 和coins.listY 创建一个小部件时没有定义。我在下面厌倦了这两个，但没有用。 List _historicalData =List(); List _historicalData =List();

我也尝试打印（coins.listX），但收到此错误“List”不是“List>”类型的子类型

多亏了你的帮助才让它工作......只是需要修改，我编辑了我的答案