使用 eachFor 遍历包含地图列表的地图答案

【问题标题】：iterate through map that contains list of maps with eachFor使用 eachFor 遍历包含地图列表的地图
【发布时间】：2020-01-25 00:46:33
【问题描述】：

我需要从 API 获取数据当我得到需要遍历它们的数据时

问题是这个 API 的结构是这样的：

{
  "events": [
    {
      "image_url": "sun.jpg", 
      "name_ar": "sun",
      "name_en": "sun"
    }, 
    {
      "image_url": "sun.jpg", 
      "name_ar": "sun",
      "name_en": "sun"
    }, 
    ......
  ]
}

地图内的地图列表

这是我的代码 forEach 只给我一个键和一个值钥匙对我没用..我只剩下价值我需要某种索引


class Events with ChangeNotifier{
List<Event> _eventsList = [];
List<Event> get eventsList {
    return [..._eventsList];
  }
Future<void> fetchEvents(http.Client client) async {
    try {
      //fetch api
      final response =  await client.get(globals.apiUrl + '/events/');
      // json.decode
      final extractedData = json.decode(response.body) as Map<String, dynamic>;
      final List<Event> loadedEvents = [];
      //store events into a List<Event>
      extractedData.forEach((key,eventData) {
        print(key);//evnts
        print(eventData);//this gives the list of maps
        loadedEvents.add(Event(
          name_en: eventData[0]['name_en'],
          name_ar: eventData[0]['name_ar'],
          image_url: eventData[0]['image_url'],
        ));
      });
      _eventsList = loadedEvents;
      //for the provider
      notifyListeners();
    } catch (error) {
      throw (error);
    }
  }
}


//Event class 
class Event with ChangeNotifier {
  final String image_url;
  final String name_ar;
  final String name_en;

  Event({this.image_url, this.name_ar, this.name_en});
}

当然，这只会导致第一个事件项

【问题讨论】：

标签： flutter data-structures dart

【解决方案1】：

您可以显式地从映射中提取'events' 值，然后遍历该列表中的事件。您需要使用as List 进行投射才能将其视为List<dynamic>，然后调用.cast<Map<String, dynamic>>() 将其视为List<Map<String, dynamic>>；

final extractedData = jsonDecode(response.body) as Map<String, dynamic>;
final encodedEvents = (extractedData['events'] as List).cast<Map<String, dynamic>>();
final loadedEvents = [
  for(final event in encodedEvents)
    Event(
      name_en: event['name_en'],
      name_ar: event['name_ar'],
      image_url: eventData[0]['image_url'],
    ),
];

【讨论】：

【解决方案2】：

无需迭代循环，只需使用https://app.quicktype.io/ 为您的响应生成模型类并如下所示使用

// To parse this JSON data, do
//
//     final eventsResponse = eventsResponseFromJson(jsonString);

import 'dart:convert';

EventsResponse eventsResponseFromJson(String str) => EventsResponse.fromJson(json.decode(str));

String eventsResponseToJson(EventsResponse data) => json.encode(data.toJson());

class EventsResponse {
    List<Event> events;

    EventsResponse({
        this.events,
    });

    factory EventsResponse.fromJson(Map<String, dynamic> json) => EventsResponse(
    events: json["events"] == null ? null : List<Event>.from(json["events"].map((x) => Event.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
    "events": events == null ? null : List<dynamic>.from(events.map((x) => x.toJson())),
    };
}

class Event {
    String imageUrl;
    String nameAr;
    String nameEn;

    Event({
        this.imageUrl,
        this.nameAr,
        this.nameEn,
    });

    factory Event.fromJson(Map<String, dynamic> json) => Event(
        imageUrl: json["image_url"] == null ? null : json["image_url"],
        nameAr: json["name_ar"] == null ? null : json["name_ar"],
        nameEn: json["name_en"] == null ? null : json["name_en"],
    );

    Map<String, dynamic> toJson() => {
        "image_url": imageUrl == null ? null : imageUrl,
        "name_ar": nameAr == null ? null : nameAr,
        "name_en": nameEn == null ? null : nameEn,
    };
}

并将您的 API 调用替换为以下

Future<void> fetchEvents(http.Client client) async {
    try {
      //fetch api
      final response =  await client.get(globals.apiUrl + '/events/');
      final List<Event> loadedEvents = new List();
      //store events into a List<Event>
      EventsResponse eventResponse = eventsResponseFromJson(response.body);
      loadedEvents.addAll(eventResponse.events);
      //for the provider
      notifyListeners();
    } catch (error) {
      throw (error);
    }
}

【讨论】：