CODEWITHSUNDEEP
listflutterfuture
jancooth
jancooth

Reputation: 567

Flutter - Fill future list from json

I want to fill a list from json. 

Future<List<Titles>> fetchTitle() async {
  String url = "https://jsonplaceholder.typicode.com/posts";

  final response = await http.get(url,headers: {'Content-Type': 'application/json'});
  return titlesFromJson(utf8.decode(response.bodyBytes));

How to fill below list using fetchTitle method. I want to add "title" item from json. 

final List myLists = [];


Expanded(
            child: GridView.count(
              crossAxisCount: 2,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              childAspectRatio: 1,
              padding: EdgeInsets.only(left: 20, top: 20, right: 20),
              children:List.generate(myLists.length, (index) {
                return InkWell(

Upvotes: 0

Views: 3772

Answers (2)

Mohamed Dernoun
Mohamed Dernoun

Reputation: 825

From the official documentation this is the way on how to fetch data from json and convert the response to list of model:

1- create a model for the post

class Post {
  int userId;
  int id;
  String title;
  String body;

  Post({this.userId, this.id, this.title, this.body});

  Post.fromJson(Map<String, dynamic> json) {
    userId = json['userId'];
    id = json['id'];
    title = json['title'];
    body = json['body'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['userId'] = this.userId;
    data['id'] = this.id;
    data['title'] = this.title;
    data['body'] = this.body;
    return data;
  }
}

2 - import http package and fetch post from the link https://jsonplaceholder.typicode.com/posts 

import 'package:http/http.dart' as http;

Future<List<Post>> fetchPosts(http.Client client) async {
  final response = await client
      .get('https://jsonplaceholder.typicode.com/posts');

  return parsePosts(response.body);
}

3 - Use the method that you define on your model to create a list that contain posts

import 'dart:convert';

List<Post> parsePosts(String responseBody) {
      final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();

      return parsed.map<Post>((json) => Post.fromJson(json)).toList();
    }

4 - to make a test that your code work, create a simple async main method that call fetchPosts with the await prefix because fetchPosts return a Future so if you don't use await you will get a future and not the List

void main() async {

  List posts = await fetchPosts(http.Client());
  // this will print the id and the title of posts
  posts.forEach((post) => print('Post id: ${post.id}  |  Post title: ${post.title}'));
}

I hope this help!

Upvotes: 1

Adeeb Arangodan
Adeeb Arangodan

Reputation: 152

To add the JSON result to a list, you may need to wait for the response and add it to the List. Since fetchTitle() method returns Future<List<Titles>>, when you await for it, you will get a List<Titles> which can be assigned to your myList.

myList = await fetchTitle();

Since we are using await, we may need to mark the method using async keyword.

void main() async {
  List myList = [];
  myList = await fetchTitle();

  print(myList);
}

Upvotes: 1

Related Questions