Map a JSON String into an Item Model in FLUTTER

Question

In this Project App is receiving posts from a WP REST API as JSON, it works fine, but I need to convert it to an Item Model (for caching and DB): so I created an Item-Model, now how can I implement it in my code, which gets String. how can I Map my data in getPosts() so it returns a Post, not a String? please, Please show me the way in CODE.

// Function to get list of posts which is String
 Future getPosts() async {
 var res = await http.get(Uri.encodeFull(apiUrl + "posts?_embed&per_page=10"),
 headers: {"Accept": "application/json"});
 setState(() {
 var resBody = json.decode(res.body);

 posts = resBody;
});

return "Success!";
}

Future builder to show a Loading indicator before loading posts:

 body: FutureBuilder>(
  future: getPosts(),
  builder: (context, snapshot) {
    if (snapshot.hasError) print(snapshot.error);

    return snapshot.hasData
        ? ListViewPosts(posts: snapshot.data)
        : Center(child: CircularProgressIndicator());
  },
),

Code for ItemModel

class Post {
  int _id;
  String _title;
  String _content;
  String _author;
  String _date;
  String _imgUrl;

  Post(this._id, this._title, this._content, this._author, this._date,
      [this._imgUrl]);

  Post.withId(this._id, this._title, this._content, this._author, this._date,
      [this._imgUrl]);

  int get id => _id;
  String get title => _title;
  String get content => _content;
  String get author => _author;
  String get date => _date;
  String get imgUrl => _imgUrl;

  set title(String newTitle) {
    this._title = newTitle;
  }

  set content(String newContent) {
    this._content = newContent;
  }

  set author(String newAuthor) {
    this._author = newAuthor;
  }

  set date(String newDate) {
    this._date = newDate;
  }

  set imgUrl(String newImgUrl) {
    this._imgUrl = newImgUrl;
  }

  //convert post to Map
  Map toMap() {
    var map = Map();

    if (id != null) {
      map['id'] = _id;
    }
    map['title'] = _title;
    map['content'] = _content;
    map['author'] = _author;
    map['date'] = _date;
    map['imgurl'] = _imgUrl;
    return map;
  }

  //Extract post from Map Object
  Post.fromMapObject(Map map) {
    this._id = map['id'];
    this._title = map['title'];
    this._content = map['content'];
    this._author = map['author'];
    this._date = map['date'];
    this._imgUrl = map['imgurl'];
  }
}

the JSON response

{ 
     "id": 73331,
    "date": "2018-11-24T19:00:21",
    "date_gmt": "2018-11-24T19:00:21",
    "guid": {
        "rendered": "theUrl?p=73331"
    },
    "modified": "2018-11-24T19:00:21",
    "modified_gmt": "2018-11-24T19:00:21",
    "slug": "%d8%aa%db%8e%d8%b3%d8%aa-%d8%a8%d9%88-%d9%be%d9%87%e2%80%8c%da%95%db%8c-%d8%b3%d9%87%e2%80%8c%d8%b1%d9%87%e2%80%8c%d9%83%db%8c",
    "status": "publish",
    "type": "post",
    "link": "theUrl/2018/11/24/%d8%aa%db%8e%d8%b3%d8%aa-%d8%a8%d9%88-%d9%be%d9%87%e2%80%8c%da%95%db%8c-%d8%b3%d9%87%e2%80%8c%d8%b1%d9%87%e2%80%8c%d9%83%db%8c/",
    "title": {
        "rendered": "تێست بو په\u200cڕی سه\u200cره\u200cكی"
    },
    "content": {
        "rendered": "تێست بو په\u200cڕی سه\u200cره\u200cكی تێست بو په\u200cڕی سه\u200cره\u200cكی تێست بو په\u200cڕی سه\u200cره\u200cكی تێست بو په\u200cڕی سه\u200cره\u200cكی تێست بو په\u200cڕی سه\u200cره\u200cكی
",
        "protected": false
    },
    "excerpt": {
        "rendered": "تێست بو په\u200cڕی سه\u200cره\u200cكی تێست بو په\u200cڕی سه\u200cره\u200cكی تێست بو په\u200cڕی سه\u200cره\u200cكی تێست بو په\u200cڕی سه\u200cره\u200cكی تێست بو په\u200cڕی سه\u200cره\u200cكی
",
        "protected": false
    },
    "author": 1,
    "featured_media": 73332,
    "comment_status": "open",
    "ping_status": "open",
    "sticky": false,
    "template": "",
    "format": "standard",
    "meta": [],
    "categories": [
        1
    ],
    "tags": [],
    "acf": [],
    "_links": {
        "self": [
            {
                "href": "theUrl/wp-json/wp/v2/posts/73331"
            }
        ],
        "collection": [
            {
                "href": "theUrl/wp-json/wp/v2/posts"
            }
        ],
        "about": [
            {
                "href": "theUrl/wp-json/wp/v2/types/post"
            }
        ],
        "author": [
            {
                "embeddable": true,
                "href": "theUrl/wp-json/wp/v2/users/1"
            }
        ],
        "replies": [
            {
                "embeddable": true,
                "href": "theUrl/wp-json/wp/v2/comments?post=73331"
            }
        ],
    }

JRomero · Accepted Answer

You would most likely want to use a serialization library. In dart, which is what runs Flutter, a common one is json_serializable.

EXAMPLE

Step 1

I'm taking their example for reference:

Given a library example.dart with an Person class annotated with @JsonSerializable():

import 'package:json_annotation/json_annotation.dart';

part 'example.g.dart';

@JsonSerializable(nullable: false)
class Person {
  final String firstName;
  final String lastName;
  final DateTime dateOfBirth;
  Person({this.firstName, this.lastName, this.dateOfBirth});
  factory Person.fromJson(Map json) => _$PersonFromJson(json);
  Map toJson() => _$PersonToJson(this);
}

Note that in dart files suffix in g.dart are generated by the build system.

Step 2

Convert to map

import 'dart:convert';
...
Map valueMap = json.decode(value);

Step 3

Deserialize

Person person = Person.from(valueMap)

INSTALL

To install, you simply add this to your pubspec.yml:

dependencies:
  ...
  json_annotation: ^1.2.0

dev_dependencies:
  build_runner: ^0.10.3

Then run flutter packages get

Map a JSON String into an Item Model in FLUTTER

Answers (2)

Related Questions