Agfdhyk

I am trying to read a JSON Response and build UI with Flutter's FutureBuilder but I am unable to get the entire JSON response on the client. When I try to print the response in two different print statements, the contents among them vary by a tiny bit. Notice how the console print output below differs for My Posts API Response and My Posts Json Response String.

Could someone explain this behaviour and how to implement a proper listen till the complete JSON Array is received at the client's end?

Expected API Response -

[{"_id":"5bd11c9b8a9fc0a744d1bebc","postId":1,"postUserId":1,"postDescription":"First Post with 2 Photos","postLongDescription":"First Post with 2 Photos","postDateTime":"2018-07-27T10:50:42.389Z","postLocationId":1,"postHasMedia":true,"postActive":true,"postLikesCount":3,"postCommentsCount":1},{"_id":"5bd11c9b8a9fc0a744d1bebd","postId":2,"postUserId":2,"postDescription":"Second Post with 1 Video","postLongDescription":"Second Post with 1 Video","postDateTime":"2018-07-27T11:02:00.389Z","postLocationId":2,"postHasMedia":true,"postActive":true,"postLikesCount":12,"postCommentsCount":2},{"_id":"5bd11c9b8a9fc0a744d1bebe","postId":3,"postUserId":2,"postDescription":"Third Post with No Video","postLongDescription":"Third Post with No Video","postDateTime":"2018-07-27T11:12:34.389Z","postLocationId":3,"postHasMedia":false,"postActive":true,"postLikesCount":9,"postCommentsCount":0},{"_id":"5bd11c9b8a9fc0a744d1bebf","postId":4,"postUserId":3,"postDescription":"Fourth Post with 1 Photo but Disabled","postLongDescription":"Fourth Post with 1 Photo but Disabled","postDateTime":"2018-07-27T11:12:34.389Z","postLocationId":2,"postHasMedia":true,"postActive":false,"postLikesCount":4,"postCommentsCount":0}]

Flutter Bloc Code -

import 'dart:async';

import 'dart:convert';

import 'dart:io';

import 'package:MyApp/models/post_model.dart';    

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



enum storyTypes {

    timeline,

    myposts

}



class PostsBloc {



Future<PostModel> getPosts(storyTypes storyType) async {

    if (storyType == storyTypes.myposts) {

        final String url = "http://127.0.0.1:8081/posts/all";

        return await http.get(url).then((getMyPostsApiResponse) {

            if (getMyPostsApiResponse.statusCode != 200) {

            throw Exception("Error with http over network");

            }

            else {

            if (getMyPostsApiResponse.statusCode == 200) {

                print('My Posts API Response - ' + getMyPostsApiResponse.body);                    

                print('My Posts Json Response String - ' + json.decode(getMyPostsApiResponse.body).toString());

                return PostModel.fromJson(json.decode(getMyPostsApiResponse.body));

            }

            else {

                throw Exception('Failed to load post');

            }

            }

        });

    }

}

Flutter Console Output -

I/flutter (32316): My Posts API Response - [{"_id":"5bd11c9b8a9fc0a744d1bebc","postId":1,"postUserId":1,"postDescription":"First Post with 2 Photos","postLongDescription":"First Post with 2 Photos","postDateTime":"2018-07-27T10:50:42.389Z","postLocationId":1,"postHasMedia":true,"postActive":true,"postLikesCount":3,"postCommentsCount":1},{"_id":"5bd11c9b8a9fc0a744d1bebd","postId":2,"postUserId":2,"postDescription":"Second Post with 1 Video","postLongDescription":"Second Post with 1 Video","postDateTime":"2018-07-27T11:02:00.389Z","postLocationId":2,"postHasMedia":true,"postActive":true,"postLikesCount":12,"postCommentsCount":2},{"_id":"5bd11c9b8a9fc0a744d1bebe","postId":3,"postUserId":2,"postDescription":"Third Post with No Video","postLongDescription":"Third Post with No Video","postDateTime":"2018-07-27T11:12:34.389Z","postLocationId":3,"postHasMedia":false,"postActive":true,"postLikesCount":9,"postCommentsCount":0},{"_id":"5bd11c9b8a9fc0a744d1bebf","postId":4,"postUserId":3,"postDescription":"Fourth Post with 1 Photo but Dis    

I/flutter (32316): My Posts Json Response String - [{_id: 5bd11c9b8a9fc0a744d1bebc, postId: 1, postUserId: 1, postDescription: First Post with 2 Photos, postLongDescription: First Post with 2 Photos, postDateTime: 2018-07-27T10:50:42.389Z, postLocationId: 1, postHasMedia: true, postActive: true, postLikesCount: 3, postCommentsCount: 1}, {_id: 5bd11c9b8a9fc0a744d1bebd, postId: 2, postUserId: 2, postDescription: Second Post with 1 Video, postLongDescription: Second Post with 1 Video, postDateTime: 2018-07-27T11:02:00.389Z, postLocationId: 2, postHasMedia: true, postActive: true, postLikesCount: 12, postCommentsCount: 2}, {_id: 5bd11c9b8a9fc0a744d1bebe, postId: 3, postUserId: 2, postDescription: Third Post with No Video, postLongDescription: Third Post with No Video, postDateTime: 2018-07-27T11:12:34.389Z, postLocationId: 3, postHasMedia: false, postActive: true, postLikesCount: 9, postCommentsCount: 0}, {_id: 5bd11c9b8a9fc0a744d1bebf, postId: 4, postUserId: 3, postDescription: Fourth Post with 1 Photo but Disabled, postLongDescr

That's just the console truncating after so many characters.

Notice that you are printing two different things:

getMyPostsApiResponse.body is the json received from the server.

json.decode(getMyPostsApiResponse.body).toString() is the decoded List's toString (which excludes the quote marks, which is why the lengths of the strings are different)

Looks like you're on Android trying to print a long string. To quote from the documentation about debugging:

The Dart print() function outputs to the system console, which you can
view using flutter logs (which is basically a wrapper around adb
logcat).

If you output too much at once, then Android sometimes discards some
log lines. To avoid this, you can use debugPrint(), from Flutter’s
foundation library. This is a wrapper around print which throttles the
output to a level that avoids being dropped by Android’s kernel.

So you could try using debugPrint instead.

Import Flutter Package to use debugPrint - import 'package:flutter/foundation.dart';