mapping api call to model class in flutter

Question

I know this is probably basic but I am kind of new at Flutter. I created a model class to map the data I am receiving from an API. The model class looks something like this:

  class item{
    final String id;
    final String description;
    final List<String> images;
 }

TheAPI call is returning this json:

   "item" : {
      "id": "abc",
      "description": "xyz",
      "images": [
            {
              "link": "https//............jpeg",
              "id": "123546",
               "zoomable": true,
            }
      
           {
              "link": "https//............jpeg",
              "id": "45876",
               "zoomable": true,
            }
       ]
 
  }

I am using :

        Item.fromJson(Map<String>, dynamic parsedJson)
         {
             id: parsedJson["item"]['id']
             images: parsedJson['item']['images']
         }

to map the API data to my model class but I do not want all the information in the images list, just "all the links". Any idea, how to extract all of them? thanks.

Answer 1

parsedJson['item']['images'] is a List<Map<String, dynamic>> and you'd prefer to have that as a List<String>. Use the map method of List and provide a function that extract the string from the json map.

final strings = parsedJson['item']['images']
    .map<String>((e) => e['link'] as String)
    .toList();

In the second line, map<String> returns an Iterable<String> and takes a function that must return a String. The function takes the element e which we know will be Map<String, dynamic> and extracts the value associated with the key link.

In the third line toList() converts the iterable to a list.

strings is therefore a List<String>

Answer 2

Your probably need to use this -> https://app.quicktype.io/ (QuickType). From there you can easily create your classes model and then you can use them in the API call for any kind of Data fetch. [Please choose dart while creating your model]

Like in your above case model will be like that :

// To parse this JSON data, do
//
//     final asf = asfFromJson(jsonString);

import 'dart:convert';

Asf asfFromJson(String str) => Asf.fromJson(json.decode(str));

String asfToJson(Asf data) => json.encode(data.toJson());

class Asf {
    Asf({
        this.item,
    });

    Item item;

    factory Asf.fromJson(Map<String, dynamic> json) => Asf(
        item: json["item"] == null ? null : Item.fromJson(json["item"]),
    );

    Map<String, dynamic> toJson() => {
        "item": item == null ? null : item.toJson(),
    };
}

class Item {
    Item({
        this.id,
        this.description,
        this.images,
    });

    String id;
    String description;
    List<Image> images;

    factory Item.fromJson(Map<String, dynamic> json) => Item(
        id: json["id"] == null ? null : json["id"],
        description: json["description"] == null ? null : json["description"],
        images: json["images"] == null ? null : List<Image>.from(json["images"].map((x) => Image.fromJson(x))),
    );

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

class Image {
    Image({
        this.link,
        this.id,
        this.zoomable,
    });

    String link;
    String id;
    bool zoomable;

    factory Image.fromJson(Map<String, dynamic> json) => Image(
        link: json["link"] == null ? null : json["link"],
        id: json["id"] == null ? null : json["id"],
        zoomable: json["zoomable"] == null ? null : json["zoomable"],
    );

    Map<String, dynamic> toJson() => {
        "link": link == null ? null : link,
        "id": id == null ? null : id,
        "zoomable": zoomable == null ? null : zoomable,
    };
}