如何在Flutter中解析此JSON数组？

Question

我正在与Flutter合作，目前正在尝试创建图形。我想从下面的链接解析此JSON数组。我的问题是“价格”对象中提供的信息，这些值都在数组本身内部。我想获取这些值并将其拆分为X和Y列表，但是我不知道如何实现此目的。我在下面发布了JSON数据的摘要。

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

我只熟悉通过创建类和构造函数来解析数据。然后创建一个fromJSON(Map<String, dynamic> json)类，并将数据放入列表中，如下面的代码段所示，该代码段是我从另一个带有对象值的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]);
 }
}

Answer 1

您可以尝试...

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

访问小部件中的数据

在Widget中，我们的预期变量位于Coins类中的property中。

例如，如果您使用FutureBuilder，则可以使用以下几行：

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

Answer 2

自动生成序列化器

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

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

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