jsonapihttpflutter

How to get JSON data from an API in flutter


I'm facing the same issue since i start coding yesterday on my project which has a part of getting some of json data from a given api.

My api link is: http://alkadhum-col.edu.iq/wp-json/wp/v2/posts?_embed

I'm working on flutter SDK and i'm confused why it is not working with me!, my job is to get only link, title, and source_url objects but i cannot get it.

I tried the following code in flutter documentation
https://flutter.dev/docs/cookbook/networking/fetch-data and after some of modification according to my needs didn't got any data.

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<Post> fetchPost() async {
  final response =
      await http.get('http://alkadhum-col.edu.iq/wp-json/wp/v2/posts/');

  if (response.statusCode == 200) {
    // If the call to the server was successful, parse the JSON
    return Post.fromJson(json.decode(response.body));
  } else {
    // If that call was not successful, throw an error.
    throw Exception('Failed to load post');
  }
}

class Post {

  final int id;
  String title;
  String link;


  Post({this.id, this.title, this.link});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      title: json['title'].toString(),
      link: json['link'].toString()
    );
  }
}

void main() => runApp(MyApp(post: fetchPost()));

class MyApp extends StatelessWidget {
  final Future<Post> post;

  MyApp({Key key, this.post}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Post>(
            future: post,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data.link);
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              // By default, show a loading spinner
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

I only got the meesage below:
Type List dynamic is not a subtype of type Map String, dynamic

Any help will be appreciated.
Thanks in advance.


Solution

  • Your JSON response is of type List<dynamic> but you are taking response in Map String, dynamic but you can do something like this

         import 'dart:async';
    import 'dart:convert';
    import 'package:flutter/material.dart';
    import 'package:clickmeetplay/iam/user/postbean.dart';
    import 'package:http/http.dart' as http;
    
    class PostHome extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(home: Scaffold(body: PostScreen(),),);
      }
    }
    
    class PostScreen extends StatefulWidget {
      @override
      _PostScreenState createState() => _PostScreenState();
    }
    
    class _PostScreenState extends State<PostScreen> {
    
      List<Post> _postList =new List<Post>();
    
      Future<List<Post> > fetchPost() async {
        final response =
        await http.get('http://alkadhum-col.edu.iq/wp-json/wp/v2/posts/');
    
        if (response.statusCode == 200) {
          // If the call to the server was successful, parse the JSON
          List<dynamic> values=new List<dynamic>();
          values = json.decode(response.body);
          if(values.length>0){
            for(int i=0;i<values.length;i++){
              if(values[i]!=null){
                Map<String,dynamic> map=values[i];
                _postList .add(Post.fromJson(map));
                debugPrint('Id-------${map['id']}');
              }
            }
          }
          return _postList;
    
        } else {
          // If that call was not successful, throw an error.
          throw Exception('Failed to load post');
        }
      }
      @override
      Widget build(BuildContext context) {
        return Container();
      }
    
      @override
      void initState() {
    
        fetchPost();
    
      }
    }
    

    Bean class

    class Post {
    
      final int id;
      String title;
      String link;
    
    
      Post({this.id, this.title, this.link});
    
      factory Post.fromJson(Map<String, dynamic> json) {
        return Post(
            id: json['id'],
            title: json['title'].toString(),
            link: json['link'].toString()
        );
      }
    }
    

    enter image description here