首页 > 解决方案 > Flutter:如何获取 json 嵌套 Map 方法

问题描述

Flutte/Dart 新手。什么可能导致我的映射问题?

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('https://cloud.iexapis.com/stable/stock/market/batch?symbols=aapl,fb&types=quote&token=hidden');

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

// A function that converts a response body into a List<Photo>.
List<Photo> parsePhotos(String response) {
  List<Photo> Photos = new List<Photo>();
  List parsePhotos= json.decode(response.toString());
  for (int i = 0; i < parsePhotos.length; i++) {
    Photos.add(new Photo.fromJson(parsePhotos[i]));
  }
  return Photos;
}



class Photo {
  final String symbol;
  final String companyName;
  final String primaryExchange;
  final String calculationPrice;
  final int open;
  final int openTime;
  final double close;
  final int closeTime;
  final double high;
  final double low;
  final double latestPrice;
  final String latestSource;
  final String latestTime;
  final int latestUpdate;
  final int latestVolume;
  final dynamic iexRealtimePrice;
  final dynamic iexRealtimeSize;
  final dynamic iexLastUpdated;
  final double delayedPrice;
  final int delayedPriceTime;
  final double extendedPrice;
  final double extendedChange;
  final double extendedChangePercent;
  final int extendedPriceTime;
  final double previousClose;
  final int previousVolume;
  final int change;
  final double changePercent;
  final int volume;
  final dynamic iexMarketPercent;
  final dynamic iexVolume;
  final int avgTotalVolume;
  final dynamic iexBidPrice;
  final dynamic iexBidSize;
  final dynamic iexAskPrice;
  final dynamic iexAskSize;
  final int marketCap;
  final double peRatio;
  final double week52High;
  final int week52Low;
  final double ytdChange;
  final int lastTradeTime;
  final bool isUsMarketOpen;

  Photo({
    this.symbol,
    this.companyName,
    this.primaryExchange,
    this.calculationPrice,
    this.open,
    this.openTime,
    this.close,
    this.closeTime,
    this.high,
    this.low,
    this.latestPrice,
    this.latestSource,
    this.latestTime,
    this.latestUpdate,
    this.latestVolume,
    this.iexRealtimePrice,
    this.iexRealtimeSize,
    this.iexLastUpdated,
    this.delayedPrice,
    this.delayedPriceTime,
    this.extendedPrice,
    this.extendedChange,
    this.extendedChangePercent,
    this.extendedPriceTime,
    this.previousClose,
    this.previousVolume,
    this.change,
    this.changePercent,
    this.volume,
    this.iexMarketPercent,
    this.iexVolume,
    this.avgTotalVolume,
    this.iexBidPrice,
    this.iexBidSize,
    this.iexAskPrice,
    this.iexAskSize,
    this.marketCap,
    this.peRatio,
    this.week52High,
    this.week52Low,
    this.ytdChange,
    this.lastTradeTime,
    this.isUsMarketOpen,
  });

  factory Photo.fromJson(String str) => Photo.fromMap(json.decode(str));

  String toJson() => json.encode(toMap());

  factory Photo.fromMap(Map<String, dynamic> json) => Photo(
    symbol: json["symbol"],
    companyName: json["companyName"],
    primaryExchange: json["primaryExchange"],
    calculationPrice: json["calculationPrice"],
    open: json["open"],
    openTime: json["openTime"],
    close: json["close"].toDouble(),
    closeTime: json["closeTime"],
    high: json["high"].toDouble(),
    low: json["low"].toDouble(),
    latestPrice: json["latestPrice"].toDouble(),
    latestSource: json["latestSource"],
    latestTime: json["latestTime"],
    latestUpdate: json["latestUpdate"],
    latestVolume: json["latestVolume"],
    iexRealtimePrice: json["iexRealtimePrice"],
    iexRealtimeSize: json["iexRealtimeSize"],
    iexLastUpdated: json["iexLastUpdated"],
    delayedPrice: json["delayedPrice"].toDouble(),
    delayedPriceTime: json["delayedPriceTime"],
    extendedPrice: json["extendedPrice"].toDouble(),
    extendedChange: json["extendedChange"].toDouble(),
    extendedChangePercent: json["extendedChangePercent"].toDouble(),
    extendedPriceTime: json["extendedPriceTime"],
    previousClose: json["previousClose"].toDouble(),
    previousVolume: json["previousVolume"],
    change: json["change"],
    changePercent: json["changePercent"].toDouble(),
    volume: json["volume"],
    iexMarketPercent: json["iexMarketPercent"],
    iexVolume: json["iexVolume"],
    avgTotalVolume: json["avgTotalVolume"],
    iexBidPrice: json["iexBidPrice"],
    iexBidSize: json["iexBidSize"],
    iexAskPrice: json["iexAskPrice"],
    iexAskSize: json["iexAskSize"],
    marketCap: json["marketCap"],
    peRatio: json["peRatio"].toDouble(),
    week52High: json["week52High"].toDouble(),
    week52Low: json["week52Low"],
    ytdChange: json["ytdChange"].toDouble(),
    lastTradeTime: json["lastTradeTime"],
    isUsMarketOpen: json["isUSMarketOpen"],
  );

  Map<String, dynamic> toMap() => {
    "symbol": symbol,
    "companyName": companyName,
    "primaryExchange": primaryExchange,
    "calculationPrice": calculationPrice,
    "open": open,
    "openTime": openTime,
    "close": close,
    "closeTime": closeTime,
    "high": high,
    "low": low,
    "latestPrice": latestPrice,
    "latestSource": latestSource,
    "latestTime": latestTime,
    "latestUpdate": latestUpdate,
    "latestVolume": latestVolume,
    "iexRealtimePrice": iexRealtimePrice,
    "iexRealtimeSize": iexRealtimeSize,
    "iexLastUpdated": iexLastUpdated,
    "delayedPrice": delayedPrice,
    "delayedPriceTime": delayedPriceTime,
    "extendedPrice": extendedPrice,
    "extendedChange": extendedChange,
    "extendedChangePercent": extendedChangePercent,
    "extendedPriceTime": extendedPriceTime,
    "previousClose": previousClose,
    "previousVolume": previousVolume,
    "change": change,
    "changePercent": changePercent,
    "volume": volume,
    "iexMarketPercent": iexMarketPercent,
    "iexVolume": iexVolume,
    "avgTotalVolume": avgTotalVolume,
    "iexBidPrice": iexBidPrice,
    "iexBidSize": iexBidSize,
    "iexAskPrice": iexAskPrice,
    "iexAskSize": iexAskSize,
    "marketCap": marketCap,
    "peRatio": peRatio,
    "week52High": week52High,
    "week52Low": week52Low,
    "ytdChange": ytdChange,
    "lastTradeTime": lastTradeTime,
    "isUSMarketOpen": isUsMarketOpen,
  };
}


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Isolate Demo';

    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

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

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

class PhotosList extends StatelessWidget {
  final List<Photo> photos;
//  final parsePhotos = json.decode(response.body).cast<Map<String, dynamic>>();
  PhotosList({Key key, this.photos}) : super(key: key);

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

错误

Launching lib\main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
Running Gradle task 'assembleDebug'...
Built build\app\outputs\apk\debug\app-debug.apk.
Flutter is taking longer than expected to report its views. Still trying...
I/OpenGLRenderer( 5371): Initialized EGL, version 1.4
D/OpenGLRenderer( 5371): Swap behavior 1
D/        ( 5371): HostConnection::get() New Host Connection established 0xdd5d9200, tid 5399
D/EGL_emulation( 5371): eglCreateContext: 0xde80f4c0: maj 2 min 0 rcv 2
D/EGL_emulation( 5371): eglMakeCurrent: 0xde80f4c0: ver 2 0 (tinfo 0xde37faf0)
D/        ( 5371): HostConnection::get() New Host Connection established 0xc8bb7680, tid 5390
D/EGL_emulation( 5371): eglCreateContext: 0xde37cc00: maj 2 min 0 rcv 2
D/EGL_emulation( 5371): eglMakeCurrent: 0xde37cc00: ver 2 0 (tinfo 0xde37f810)
I/Choreographer( 5371): Skipped 411 frames!  The application may be doing too much work on its main thread.
D/EGL_emulation( 5371): eglMakeCurrent: 0xde80f4c0: ver 2 0 (tinfo 0xde37faf0)
Syncing files to device Android SDK built for x86...
I/OpenGLRenderer( 5371): Davey! duration=8078ms; Flags=1, IntendedVsync=1110681936778, Vsync=1117531936504, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=1117546732479, AnimationStart=1117546825482, PerformTraversalsStart=1117546831170, DrawStart=1117600733845, SyncQueued=1117602574377, SyncStart=1117645210311, IssueDrawCommandsStart=1117645436189, SwapBuffers=1118338480166, FrameCompleted=1118803458523, DequeueBufferDuration=29600000, QueueBufferDuration=176000, 
D/EGL_emulation( 5371): eglMakeCurrent: 0xde37cc00: ver 2 0 (tinfo 0xde37f810)
I/flutter ( 5371): Exception: type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'List<dynamic>'

在此处输入图像描述

json结果:

{"AAPL":{"stats":{"week52change":0.232986,"week52high":255.93,"week52low":142,"marketcap":1136677331400,"employees":137000,"day200MovingAvg":199.29,"day50MovingAvg" :225.28,"float":4436680630.59,"avg10Volume":26482506.4,"avg30Volume":26817874.5,"ttmEPS":11.9342,"ttmDividendRate":3,"companyName":"Apple, Inc.","sharesOutstanding":4443270000, "maxChangePercent":252.2871,"year5ChangePercent":1.3384,"year2ChangePercent":0.5329,"year1ChangePercent":0.1512,"ytdChangePercent":0.6199,"month6ChangePercent":0.2152,"month3ChangePercent":0.2274,"month1ChangePercent":0.1391,"day30ChangePercent “:0.1696,”day5ChangePercent":0.0272,"nextDividendDate":"2019-11-07","dividendYield":0.011726995543741695,"nextEarningsDate":"2020-02-04","exDividendDate":"2019-11-07","perRatio" :21.44,"beta":1.534927573962706},"quote":{"symbol":"AAPL","companyName":"Apple, Inc.","primaryExchange":"NASDAQ","calculationPrice":"close", "open":249.5,"openTime":1572615000544,"close":255.82,"closeTime":1572638400572,"high":255.93,"low":249.16,"latestPrice":255.82,"latestSource":"Close", "latestTime":"2019 年 11 月 1 日","latestUpdate":1572638400572,"latestVolume":38139225,"iexRealtimePrice":null,

Json 截图

[json[2]截图

堆栈跟踪

{"AAPL":{"stats":{"week52change":0.232986,"week52high":255.93,"week52low":142,"marketcap":1136677331400,"employees":137000,"day200MovingAvg":199.29,"day50MovingAvg" :225.28,"float":4436680630.59,"avg10Volume":26482506.4,"avg30Volume":26817874.5,"ttmEPS":11.9342,"ttmDividendRate":3,"companyName":"Apple, Inc.","sharesOutstanding":4443270000, "maxChangePercent":252.2871,"year5ChangePercent":1.3384,"year2ChangePercent":0.5329,"year1ChangePercent":0.1512,"ytdChangePercent":0.6199,"month6ChangePercent":0.2152,"month3ChangePercent":0.2274,"month1ChangePercent":0.1391,"day30ChangePercent “:0.1696,”day5ChangePercent":0.0272,"nextDividendDate":"2019-11-07","dividendYield":0.011726995543741695,"nextEarningsDate":"2020-02-04","exDividendDate":"2019-11-07","perRatio" :21.44,"beta":1.534927573962706},"quote":{"symbol":"AAPL","companyName":"Apple, Inc.","primaryExchange":"NASDAQ","calculationPrice":"close", "open":249.5,"openTime":1572615000544,"close":255.82,"closeTime":1572638400572,"high":255.93,"low":249.16,"latestPrice":255.82,"latestSource":"Close", "latestTime":"2019 年 11 月 1 日","latestUpdate":1572638400572,"latestVolume":38139225,"iexRealtimePrice":null,

截屏

在此处输入图像描述

预期:示例:https ://flutter.dev/docs/cookbook/networking/background-parsing 在此处输入图像描述

标签: flutterdart

解决方案


您附加为“Json results”的 JSON 的根是 map,但您试图将其分配给 List 变量:

  List parsePhotos= json.decode(response.toString());

确保您使用正确的响应结构。还要访问响应的主体,不要将整个响应对象转换为字符串:

  Map parsedResponse = json.decode(response.body);

此外,我强烈建议使用代码生成器进行 JSON(反)序列化,以使您更轻松。json_serializablebuild_runner将帮助您做到这一点。我将向您展示如何使用嵌套映射反序列化对象的示例:

{"d":0.5,"nestedMaps":{"test":{"s":"a"},"test2":{"s":"a"}},"list":["a","b"]}

为其定义类并使用 JsonSerializable 注解:

import 'package:json_annotation/json_annotation.dart';

part 'photo.g.dart';

@JsonSerializable()
class Photo {
  final double d;
  final Map<String, Map> nestedMaps;
  final List<String> list;

  Photo(this.d, this.nestedMaps, this.list);

  factory Photo.fromJson(Map<String, dynamic> json) => _$PhotoFromJson(json);
  Map<String, dynamic> toJson() => _$PhotoToJson(this);
}

您也可以指定动态类型。现在运行代码生成器:

flutter packages pub run build_runner build

现在您可以解析 JSON:

Photo.fromJson(jsonDecode('{"d":0.5,"nestedMaps":{"test":{"s":"a"},"test2":{"s":"a"}},"list":["a","b"]}'));

在此处输入图像描述

Dart 只能使用 String 键对 Map 进行解码/编码,所以要小心。


推荐阅读