Flutter - заполнить будущий список от json - PullRequest
Новая
       10

Flutter - заполнить будущий список от json

0 голосов
/ 09 апреля 2020

Я хочу заполнить список из 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));

Как заполнить приведенный ниже список, используя метод fetchTitle. Я хочу добавить элемент "title" из 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(

Ответы [ 2 ]

1 голос
/ 09 апреля 2020

Из официальной документации это способ получения данных из json и преобразования ответа в список моделей:

1 - создание модели для сообщения 

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 - импортировать пакет http и извлечь сообщение по ссылке 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 - использовать метод, определенный в вашей модели, для создания списка, содержащего сообщения 

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 - чтобы проверить работоспособность вашего кода, создайте простой основной метод asyn c, который вызывает fetchPosts с префиксом await, потому что fetchPosts возвращает Future, поэтому, если вы не используете await, вы будете получить будущее, а не список 

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

Надеюсь, это поможет!

1 голос
/ 09 апреля 2020

Чтобы добавить результат JSON в список, вам может понадобиться дождаться ответа и добавить его в список. Так как метод fetchTitle() возвращает Future<List<Titles>>, когда вы ожидаете его, вы получите List<Titles>, который можно назначить вашему myList. 

myList = await fetchTitle();

Поскольку мы используем await, нам может потребоваться пометьте метод, используя ключевое слово asyn c. 

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

  print(myList);
}
...