Problems parsing complex json in Flutter

Question

I am having issues converting the following response ->

{
"data": [
{
  "_id": "1AoJoWJ5Hdx3nZ5t",
  "title": "Orange is the new black",
  "imageUrl": "/1532353304050-oinb.jpg",
  "likesCount": 674
 },
{
  "_id": "AeqiQJewtTvMPc1B",
  "title": "X-Files",
  "imageUrl": "/1532353346638-xfiles.png",
  "likesCount": 6155
 },
{
  "_id": "gPkzfXoJXX5TuTuM",
  "title": "Star Trek: Voyager",
  "imageUrl": "/1532353336145-voyager.jpg",
  "likesCount": 23
 },
{
  "_id": "vQBQcYwtF9GWWJyK",
  "title": "South Park",
  "imageUrl": "/1532353313669-southpark.jpg",
  "likesCount": 56
 },
{
  "_id": "wjLUixBQ4sirMAYw",
  "title": "The Simpsons",
  "imageUrl": "/1532353326075-thesimpsons.jpg",
  "likesCount": 65
   }
 ]
}

I tried using the jsonserializer plugin as well as the json_annotations plugin but got nowhere. I did try to get a parser class with quicktype.io but It seems to not work at all. Can someone please guide me or assist me with this issue? Thanks!

Why not implement ".fromJson" and return your desire Map

Elad
– Elad

2020-07-01 13:29:55 +00:00
Commented Jul 1, 2020 at 13:29 — Elad
– Elad, Commented Jul 1, 2020 at 13:29

Praveen Parihar · Accepted Answer · 2020-07-01 14:03:34Z

1

There is a good plugin for that in Android Studio.
JSON to Dart Class.
Once you install the plugin do as follow.

Press ALT + L
Give a Class Name and paste your JSON response
And you are done.

After you get a response do as follow as

import 'dart:convert';
var decodedData = json.decode(response.body);
var data = Data.fromJson(decodedData)

If you need the status code of you response then response.statusCode

edited Jul 1, 2020 at 14:03

answered Jul 1, 2020 at 13:42

Praveen Parihar

2922 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Knight Over a year ago

Hey! Thanks for replying. I got it but what do I do with the response afterwards? Do I do Data.fromJson or Demo.fromJson because I am getting an error back no matter what I try.

Michael Knight Over a year ago

I was trying just that even before I posted the question but I am getting null.

mahesh · Accepted Answer · 2020-07-01 14:16:18Z

I followed this official document of Flutter and it works for me.

https://flutter.dev/docs/development/data-and-backend/json

Follow these steps to solve your problem.

Add dependencies as shown in the document.

dependencies:
  # Your other regular dependencies here
  json_annotation: <latest_version>

dev_dependencies:
  # Your other dev_dependencies here
  build_runner: <latest_version>
  json_serializable: <latest_version>

Create stackoverflow.dart

import 'package:json_annotation/json_annotation.dart';

part 'stackoverflow.g.dart';

@JsonSerializable()
class StackOverFlowModel {
  @JsonKey(name: '_id')
  String id;
  String title;
  String imageUrl;
  int likesCount;

  StackOverFlowModel();
  
  factory StackOverFlowModel.fromJson(Map<String, dynamic> json) =>
      _$StackOverFlowModelFromJson(json);
  Map<String, dynamic> toJson() => _$StackOverFlowModelToJson(this);
}

Giving variable name as _id will confuse Dart with a private variable. It is better to give it a JSON name using JsonKey annotation.

Run flutter pub run build_runner build in the terminal.
stackoverflow.g.dart will be generated like this.

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'stackoverflow.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

StackOverFlowModel _$StackOverFlowModelFromJson(Map<String, dynamic> json) {
  return StackOverFlowModel()
    ..id = json['_id'] as String
    ..title = json['title'] as String
    ..imageUrl = json['imageUrl'] as String
    ..likesCount = json['likesCount'] as int;
}

Map<String, dynamic> _$StackOverFlowModelToJson(StackOverFlowModel instance) =>
    <String, dynamic>{
      '_id': instance.id,
      'title': instance.title,
      'imageUrl': instance.imageUrl,
      'likesCount': instance.likesCount
    };

For testing do this

Map map = {
    "data": [
      {
        "_id": "1AoJoWJ5Hdx3nZ5t",
        "title": "Orange is the new black",
        "imageUrl": "/1532353304050-oinb.jpg",
        "likesCount": 674
      },
      {
        "_id": "AeqiQJewtTvMPc1B",
        "title": "X-Files",
        "imageUrl": "/1532353346638-xfiles.png",
        "likesCount": 6155
      },
      {
        "_id": "gPkzfXoJXX5TuTuM",
        "title": "Star Trek: Voyager",
        "imageUrl": "/1532353336145-voyager.jpg",
        "likesCount": 23
      },
      {
        "_id": "vQBQcYwtF9GWWJyK",
        "title": "South Park",
        "imageUrl": "/1532353313669-southpark.jpg",
        "likesCount": 56
      },
      {
        "_id": "wjLUixBQ4sirMAYw",
        "title": "The Simpsons",
        "imageUrl": "/1532353326075-thesimpsons.jpg",
        "likesCount": 65
      }
    ]
  };

  List<StackOverFlowModel> list = List.generate(map['data'].length,
      (index) => StackOverFlowModel.fromJson(map['data'][index]));

  print(list);

Collectives™ on Stack Overflow

Problems parsing complex json in Flutter

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related