How to fetch the JSON data in flutter application?

Admin 1
Viewed 285

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",
                },
               
            ]
        }
    ]
}
flutter-listview flutter-pageview flutter arrays json
2 Answers

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

user_102924080

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