Question

我需要从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});
}

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

Answer 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'],
    ),
];

Answer 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);
    }
}

遍历包含每个map的地图列表的map

2 个答案: