Reputation: 115

Flutter: how to display data from a parsed json object containing a list of objects

after parsing a local JSON object from the assets folder,I can't display the contents on the screen, I've been at it for two days, please bear in mind that I'm a newbie in programming and flutter development fresh out from a udemy course and this is my first project. Id appreciate any help I can get.

my JSON file

{
 "movies": [
  {
   "name": "JOKER",
   "actors": [
     {
       "name1": "Joaquin Phoenix"
     },
     {
       "name2": "Robert De Niro"
     },
     {
      "name3": "Zazie Beetz"
     }
  ],
   "category": [
     {
      "genre1": "Crime"
     },
     {
      "genre2": "Drama"
     },
     {
      "genre3": "Thriller"
     }
   ],
   "timeM": "121",
   "text": "A gritty character study of Arthur Fleck, a man disregarded by society.",
   "image": "image url",

 ***there are 4 more similar objects within the movies list***
},

my JSON model class

import 'dart:convert';

MovieList movieListFromJson(String str) => MovieList.fromJson(json.decode(str));

class MovieList {
    List<Movie> movies;

    MovieList({ this.movies,});

    factory MovieList.fromJson(Map<String, dynamic> json) => MovieList(
        movies: List<Movie>.from(json["movies"].map((x) => Movie.fromJson(x))),
    );
}

class Movie {
    String name;
    List<Actor> actors;
    List<Category> category;
    String timeM;
    String text;
    String image;

    Movie({ this.name, this.actors, this.category, this.timeM, this.text, this.image,});

    factory Movie.fromJson(Map<String, dynamic> json) => Movie(
        name: json["name"],
        actors: List<Actor>.from(json["actors"].map((x) => Actor.fromJson(x))),
        category: List<Category>.from(json["category"].map((x) => Category.fromJson(x))),
        timeM: json["timeM"] == null ? null : json["timeM"],
        text: json["text"],
        image: json["image"],
    );
}

class Actor {
    String name1;
    String name2;
    String name3;

    Actor({this.name1,this.name2,this.name3,
    });

    factory Actor.fromJson(Map<String, dynamic> json) => Actor(
        name1: json["name1"] == null ? null : json["name1"],
        name2: json["name2"] == null ? null : json["name2"],
        name3: json["name3"] == null ? null : json["name3"],
    );
}

class Category {
    String genre1;
    String genre2;
    String genre3;

    Category({this.genre1,this.genre2,this.genre3,
    });

    factory Category.fromJson(Map<String, dynamic> json) => Category(
        genre1: json["genre1"] == null ? null : json["genre1"],
        genre2: json["genre2"] == null ? null : json["genre2"],
        genre3: json["genre3"] == null ? null : json["genre3"],
    );
}

My widget class

class App extends StatefulWidget {
@override
_AppState createState() => _AppState();
}

class _AppState extends State<App> {
var movies;

void loadAsset() async {
  final response = await rootBundle.loadString('assets/movies.json');
  final movieModel = movieListFromJson(response);

  setState(() {
    movies = movieModel;
  });
}

_AppState() {
  loadAsset();
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: true,
    home: Scaffold(
    body: Text(movies[2].category[1].genre1),
    appBar: AppBar(
      title: Text('movie schedules'),
      ),
    ),
  );
}

}

Upvotes: 1

Answers (3)

nitinsingh9x

Reputation: 696

From newbie to newbie gitrepo for you my friend enjoy :) https://github.com/nitinsingh9x/flutterFutureBuilder

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    `return FutureBuilder(`
      future: rootBundle.loadString('assets/movies.json'),
      builder: (BuildContext context, AsyncSnapshot snap) {
        if (snap.hasData) {
          var movies = movieListFromJson(snap.data);
          return Scaffold(
              appBar: AppBar(
                  backgroundColor: Colors.deepPurple, title: Text('Movies')),
              body: Column(
                children:
                    movies.movies.map((movie) => Text(movie.name)).toList(),
              ));
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

Upvotes: 2

Rodrigo Bastos

Reputation: 2448

A much elegant solution is to use a FutureBuilder to handle the async operation of reading a file. It will be as beautiful as this:

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: true,
    home: Scaffold(
    body: FutureBuilder(
      future: 
      builder: (context, snapshot) {
        if (snapshot.hasData()) {
          return Text(snapshot.data[2].category[1].genre1),
        }
        return CircularProgressIndicator();
      }
    )
    appBar: AppBar(
      title: Text('movie schedules'),
      ),
    ),
  );
}

You even gain a CircularProgressIndicator to indicate that you are loading the file

Upvotes: 1

João Pedro Ache Virgili

Reputation: 642

I don't if that's the problem but try using initState instead of constructor.

initState() {
   final response = await rootBundle.loadString('assets/movies.json');
   final movieModel = movieListFromJson(response);

   setState(() {
      movies = movieModel;
   });
}

In body, make if to show something while your JSON isn't loading.

...
body: movies ? Text(movies[2].category[1].genre1) : CircularProgressIndiciator(),
...

Upvotes: 0

Flutter: how to display data from a parsed json object containing a list of objects

Answers (3)

Related Questions