flutter - *已解决* 在未来的构建器中使用存储在类中的 json 数据

Question

所以我有一个 AdsList 类，我想在未来的构建器中使用它。我知道我可以使用 for 循环并将嵌套的 json 存储在列表中并在未来的构建器中使用它，但我正在尝试使用一个类。在 fetchJson() 方法中，解析的变量包含 json 数据并且不是 Null。我还注释掉了 snapshot.length，因为我不知道如何返回类 AdsList 的长度。

我没有粘贴整个文件，而是没有构建的小部件。

parsed变量中嵌套的json格式如下。

[
  {
    "id": 1,
    "price": 1000000
  },
  {
    "id": 2,
    "price": 2000000
  }
]

我有点不确定 fetchJson() 应该返回什么，或者是无效的。

Future fetchJson() async {

这是构建应用程序时的图像。

失败并出现以下异常:

flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following NoSuchMethodError was thrown building:
flutter: Class 'AdsList' has no instance method '[]'.
flutter: Receiver: Instance of 'AdsList'
flutter: Tried calling: [](0)

代码

import 'package:flutter/foundation.dart'
    show debugDefaultTargetPlatformOverride;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async' 
    show Future;

Future<dynamic> fetchJson() async {
  String url = "http://<hidden_nested_json>";
  final response = await http.get(url);
  var parsed = json.decode(response.body);

  AdsList ads = new AdsList.fromJson(parsed);
  print(ads);
  return ads;
}

class Ad {
  final int id;
  final int sqf;
  final int price;
  final String url;
  //final String thumbnailUrl;

  Ad({
    this.id, 
    this.sqf, 
    this.price, 
    this.url
  }) ;//, this.thumbnailUrl});

  factory Ad.fromJson(Map<String, dynamic> json) {
    return new Ad(
      finnkode: json['id'] as int,
      areal: json['sqf'] as int,
      prisantydning: json['price'] as int,
      url: json['url'] as String,
      //thumbnailUrl: json['thumbnailUrl'] as String,
    );
  }
}

class AdsList {
  final List<Ad> ads;

  AdsList({
    this.ads,
  });


  factory AdsList.fromJson(List<dynamic> parsedJson) {

    List<Ad> ads = new List<Ad>();

    ads = parsedJson.map((i)=>Ad.fromJson(i)).toList();

    return new AdsList(
      ads: ads,
    );
  }
}

class Houses extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Container(
        child: FutureBuilder(
        future: fetchJson(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
        print(snapshot.data);
        if (snapshot.data != null) {
          return ListView.builder(
            //itemCount: snapshot.data.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: snapshot.data[index].id,
                subtitle: snapshot.data[index].price,
            );
            }
          );
        }
      },
      ),
        ) 

      );
  }
}

Answer 1

你的序列化是错误的!当您将解码的 .json 传递给您的 AdList.fromJson 时，它是一个 Map构造函数它必须收到 Map<String,dynamic>实例而不是 List<dynamic> .

我添加了一个键 adList在 .json 文件中只是为了更清楚。

"adList": [
  {
    "id": 1,
    "price": 1000000
  },
  {
    "id": 2,
    "price": 2000000
  }
]

在你的AdList你应该拥有的构造函数:

factory AdsList.fromJson(Map<String, dynamic> json) {
    // here we've a json map with a list "adList" of maps
    // which holds your ads data.
    var listOfMaps = List<Map<String,dynamic>>.from(json['adList']);

    List<Ad> ads = new List<Ad>();
    ads = listOfMaps.map(( adMap )=>Ad.fromJson( adMap )).toList();

    return new AdsList(
      ads: ads,
    );
  }

现在您无需更改 fetch方法:

Future<dynamic> fetchJson() async {
  String url = "http://<hidden_nested_json>";
  final response = await http.get(url);
  var parsed = json.decode(response.body);

  AdsList ads = new AdsList.fromJson(Map.from(parsed));
  print(ads);
  return ads;
}

看看this文章更清晰你的连载技巧。希望对您有所帮助。