How to fetch the JSON data in flutter application?

Question

I have below JSON data fetched from server, which I need to fetch and configure in pageviewbuilder as well as listview builder in flutter application.

Listview builder(vertical scroll) is nested in Pageview builder(horizontal scroll), this I already configured

Things To be Display are like this

Page ---------- Order Items

Order 16 >> Order 16, item 1 , Order 16 item 2

Order 18 >> Order 18, item 1 , Order 18 item 2 , order 18 item 3

I am new to the learning of JSON in flutter, please guide me how should I fetch the data and use to for the configuration of the above as required.

{
    "error": "false",
    "content": [
        {
            "comp_code": "4",
            "comp_name": "KMT OVERSEAS",
            "order_no": "16",
            "soh_pk": "23660",
            "order_items": [
                {
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "16",
                    "sod_pk": "31689",
                },
                {
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "16",
                    "sod_pk": "31688",
                }
            ]
        },
        {
            "comp_code": "4",
            "comp_name": "KMT OVERSEAS",
            "order_no": "18",
            "soh_pk": "23702",
            "order_items": [
                {
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "18",
                    "sod_pk": "31749",
                },
                {
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "18",
                    "sod_pk": "31742",

                },
                {
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "18",
                    "sod_pk": "31743",
                },
               
            ]
        }
    ]
}

score 2 · Answer 1 · answered Aug 28 '20 at 01:39

2

For fetch JSON from a server:

Add the Http package.
Make a network request using the Http package.
Convert the response into a list
Move this work to a separate isolate.

For more info check out this link

answered Aug 28 '20 at 01:39

Abbas Jafari

1,492
2
16
28

score 1 · Answer 2 · answered Aug 28 '20 at 06:24

1

You have to Follow the following steps and customize the given code to your own:

1 Place this plugin in pubspec.yaml file http: ^0.12.0+4

2 import 'package:http/http.dart' as http; ///http i am using below you can change it

3 build a function to fetch data:

  Future<Map> getNews() async {
  String apiurl = "https://your url/";
  http.Response response = await http.get(apiurl);
  return json.decode(response.body);
}

4 delare a Map variable

Map data;

5 call the funtion inside of async method like:

// Future<void> main() async {} you can call inside  initstate or any custom function 
 data = await getNews();

now your json data is inside of data, you can use it any way as you want. 6 used inside your listview.builder like following

new Center(
        child: new ListView.builder(
            itemCount: data.length,
            padding: EdgeInsets.all(8.0),
            itemBuilder: (BuildContext context, int position) {
              return new ListTile(
//here posts and title are json variables that are in json file
                title: new Text("${data["posts"][position]["title"]}"),
                subtitle: new Text(
                  parseHtmlString("${data["posts"][position]["content"]}"),
                  maxLines: 18,
                ),
              );
            }),
      ),

answered Aug 28 '20 at 06:24

Qasim Ali

434
2
5
31

2

Hey Qasim, where exactly I need to call `data = await getNews();` because I called in it a async method and that method is called in `initState()` and i am getting `data` as null, please provide a guidance – Aug 28 '20 at 09:07
1

you can call it in main function, it will works fine, and also declare Map data as a project level global variable. and you can use 'data' every where as you want in your project. @VickySingh – Qasim Ali Aug 28 '20 at 14:22
1

you can check 'data' as by printing on Console. to ensure that it is null or not @VickySingh – Qasim Ali Aug 28 '20 at 14:24
1

I called it in the main function, and it comes out to be null – Aug 28 '20 at 15:22
1

call it in main(), then use debugprint('$data'); in next line and check , what is output? – Qasim Ali Aug 28 '20 at 16:03
you mean to call it in `void initState()`? – Aug 28 '20 at 16:48
paste your main.dart file code here i will guide you – Qasim Ali Aug 28 '20 at 17:04

How to fetch the JSON data in flutter application?

2 Answers2

Linked