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",
                },
               
            ]
        }
    ]
}

Solution 1

For fetch JSON from a server:

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

For more info check out this link

Solution 2

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,
                ),
              );
            }),
      ),

Comments

[Admin]

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

[Qasim Ali]

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]

you can check 'data' as by printing on Console. to ensure that it is null or not @VickySingh

[Admin]

I called it in the main function, and it comes out to be null

[Qasim Ali]

call it in main(), then use debugprint('$data'); in next line and check , what is output?

[Admin]

you mean to call it in void initState()?

[Qasim Ali]

paste your main.dart file code here i will guide you