Flutter中如何解析json数据并显示在Listview中？

Question

我想在flutter中解析下面的数据并在listview中显示。我已经尝试了很多方法，但是得到了 _InternalLinkedHashMap' has no instance method 'map' with matching arguments 这样的错误。

我该怎么做？请帮忙

Json 数据

{
    "success": true,
    "data": {
        "categoryList": [{
            "category_id": 4,
            "category_name": "Super Hero",
            "category_type": "Free",
            "order_number": 3,
            "category_img": "https://avatars0.githubusercontent.com/u/1?v=4",
            "thumb_img": "https://avatars0.githubusercontent.com/u/1?v=4",
            "description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit",
            "website_url": "www.superhero.com",
            "created_date": "2018-05-14 12:15:38",
            "number_of_images": "21",
            "categoryImageList": [{
                "category_name": "Super Hero",
                "images_id": 35,
                "category_id": 4,
                "image_large": "https://avatars0.githubusercontent.com/u/2?v=4",
                "thumb_img": "https://avatars0.githubusercontent.com/u/2?v=4",
                "status": "Active",
                "created_date": "2018-05-14 12:50:56"
            }]
        }],
        "ListData": [{
            "wallpaper_id": 30,
            "wallpaper_img": "https://avatars0.githubusercontent.com/u/6?v=4",
            "thumb_img": "https://avatars0.githubusercontent.com/u/6?v=4",
            "website_url": "www.Yahoo.com",
            "created_date": "2018-05-14T12:56:35.000Z"
        }]
    }
}

---

import 'dart:async';
import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;


Future<List<Photo>> fetchPhotos(http.Client client) async {
  final response =     
  await client.get('jsondataurl');

  // Use the compute function to run parsePhotos in a separate isolate
  return compute(parsePhotos, response.body);
}

// A function that will convert a response body into a List<Photo>
List<Photo> parsePhotos(String responseBody) {
  final parsed = json.decode(responseBody);

  return parsed.map<Photo>((json) => new Photo.fromJson(json)).toList();
}

class Photo {
  final int albumId;
  final int id;
  final String title;
  final String url;
  final String thumbnailUrl;

  Photo({this.albumId, this.id, this.title, this.url, this.thumbnailUrl});

  factory Photo.fromJson(Map<String, dynamic> json) {
    return new Photo(
      albumId: json['category_id'] as int,
      id: json['order_number'] as int,
      title: json['category_name'] as String,
      url: json['category_img'] as String,
      thumbnailUrl: json['thumb_img'] as String,
    );
  }
}

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new FutureBuilder<List<Photo>>(
        future: fetchPhotos(new http.Client()),
        builder: (context, snapshot) {
          if (snapshot.hasError) print(snapshot.error);

          return snapshot.hasData
              ? new PhotosList(photos: snapshot.data)
              : new Center(child: new CircularProgressIndicator());
        },
      ),
    );
  }
}

class PhotosList extends StatelessWidget {
  final List<Photo> photos;

  PhotosList({Key key, this.photos}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new GridView.builder(
      gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: photos.length,
      itemBuilder: (context, index) {
        return new Image.network(photos[index].thumbnailUrl);
      },
    );
  }
}

Answer 1

问题在于您的parsePhotos 函数。您假设收到的 JSON 文件只是照片列表，但其中还包含其他项目。像这样更改它可以解决问题：

List<Photo> parsePhotos(String responseBody) {
  final parsed = json.decode(responseBody);

  return (parsed["data"]["categoryList"] as List).map<Photo>((json) => 
       new Photo.fromJson(json)).toList();
}