Flutter toJson and fromJson when you have an array

I couldn’t quite figure it out how to get it working when you have an object which has an array of objects in json format. This is what I ended up with. totalItems is a property in the FullWordList class, and this class contains a List of Items, which we declared further down. Both got toJson and fromJson methods which means they can get parsed by json.

And to have the whole object parsed we will first take in the data for FullWordList and inside the fromJson method, we will declare the first property totalItems simply from its value, but the items property will use the general from method from List to create an list with our values, and then we will use the map method to go through each object and use the Item’s fromJson method, and lastly we’ll call toList() to retrieve the List in a List<Item> format.

class FullWordList {
  int totalItems = -1;
  List<Item> items = [];
  FullWordList();

  FullWordList.fromJson(Map<String, dynamic> json)
      : totalItems = json['totalItems'],
        items = List.from(json['items']).map((e) => Item.fromJson(e)).toList();

  Map<String, dynamic> toJson() =>
      {'totalItems': this.totalItems, 'items': this.items};
}

class Item {
  String english = "";

  Item.fromJson(Map<String, dynamic> json) : english = json['english'];

  Map<String, dynamic> toJson() => {'english': this.english};
}

And this is how we could utilize the fromJson method for a FullWordList object using http to retrieve the data.

  Future<FullWordList> getDetails() async {
    var url = Uri.https('mywebsite.com',
        '/api/myapifunction', {"id": "65", "website": "fileidea"});

    // Await the http get response, then decode the json-formatted response.
    var response = await http.get(url);
    print(convert.jsonDecode(response.body));
    print(response.statusCode);

    if (response.statusCode == 200) {
      var jsonResponse = convert.jsonDecode(response.body);
      FullWordList dataList = FullWordList.fromJson(jsonResponse);
      return dataList;
    } else {
      print('Request failed with status: ${response.statusCode}.');
      return new FullWordList();
    }
  }

How to use bootstrap icons with npm i bootstrap-icons in Angular

There are a few ways to go about it but I found this way to be the most working and simple. First of all, download the package and add it to your dependencies.

npm i bootstrap-icons --save

Then add this line to your styles.css file at the top:

@import "~bootstrap-icons/font/bootstrap-icons.css";

Now whenever you write a HTML with the i tag with the bi <icon> code like below, you’ll see the icon appear!

<i class="bi bi-house"></i>

For example, go to https://icons.getbootstrap.com/icons/house/ we can see the code to the right that the code snippet is indeed “bi bi-house” for the house icon.