Question 357333 in Flutter Question posted in
The official Flutter documentation can be found here.

How to fetch data from this Nested JSON using GET method in flutter using Data Model?

I am trying to print the value of JSON in Future Builder using List Tile Builder. But I don’t Know how to get the particular value from Nested JSON to the List Tile Text widget. Can someone help me?

This is the JSON File and Link for it:

    {
   "result":"success",
   "data":[
      {
         "Id":1,
         "LucasTvsPartNo":"26080177",
         "PartImage":"LFAA 5031.png",
         "FilterType":"Air Filter",
         "CustomerPartNo":"LFAA-5031",
         "Model":"Bajaj GC 1000",
         "ModelImage":"bajajgc1000.png",
         "Segment":"3W",
         "Descriptions":"Air Filter - Polyurethane Type",
         "OEMName":"BAJAJ",
         "OEMImage":"bajaj.png",
         "OEMPartNo":null,
         "ListPrice":156.87,
         "MRPPrice":189.0,
         "MasterCartonSize":32
      }
]
}

The Data Field in this JSON has many records Upto 10.

This is Data Model Using JSON to Dart:

class Temperatures {
final String result;
final List<Datum> data;

Temperatures({
    required this.result,
    required this.data,
});

}

class Datum {
    final int id;
    final String lucasTvsPartNo;
    final String partImage;
    final String filterType;
    final String customerPartNo;
    final String model;
    final String modelImage;
    final String segment;
    final String descriptions;
    final String oemName;
    final String oemImage;
    final dynamic oemPartNo;
    final double listPrice;
    final int mrpPrice;
    final int masterCartonSize;
Datum({
    required this.id,
    required this.lucasTvsPartNo,
    required this.partImage,
    required this.filterType,
    required this.customerPartNo,
    required this.model,
    required this.modelImage,
    required this.segment,
    required this.descriptions,
    required this.oemName,
    required this.oemImage,
    required this.oemPartNo,
    required this.listPrice,
    required this.mrpPrice,
    required this.masterCartonSize,
});

}

My Code for Printing the data from the class to UI using future builder:

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:sample_app/DbHelper/Product.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late Future _futureData;
  @override
  void initState() {
    WidgetsFlutterBinding.ensureInitialized();
    _futureData = getData();
    super.initState();
  }

  Future getData() async {
    var url = Uri.parse(
        'http://35.154.214.176/LucasfilterAPI/api/Values/GetPricelist');
    var response = await http.get(url, headers: {
      "Accept": "application/json",
      "content-type": "application/json"
    });

    Map<String, dynamic> jsonMap = json.decode(response.body);

    print(response.statusCode);
    print(response.body);

    List<Product> Products =
        List<Product>.from(jsonMap['data'].map((x) => Data.fromJson(x)));

    return Products;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
          future: _futureData,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(
                child: CircularProgressIndicator(),
              );
            } else if (snapshot.hasError) {
              return Center(
                child: Text('Error fetching data'),
              );
            } else {
              List Data = snapshot.data;
              return ListView.builder(
                itemCount: Data.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Result: ${Data[index].result}'),
                    subtitle: Text('Data: ${Data[index].data.toString()}'),
                  );
                },
              );
            }
          }),
    );
  }
}

It show me the ERROR of Fetching Data .I don’t know how to handle nested JSON data. This is the Problem described. If you want any further clarification. I can Provide also.

Tags:

3

Answers


  1. 0

    You can refer to this link for how to parse and show data from API and also I think you are using the wrong model for data parsing you should do

    List<Datum>.from(jsonMap['data'].map((x) => Datum.fromJson(x)));

    You need to create the fromJson function in the Datum class for that you can use Json Serializable package.

    Login or Signup to reply.
  2. 0 
    class Datum {
  final int id;
  final String lucasTvsPartNo;
  final String partImage;
  final String filterType;
  final String customerPartNo;
  final String model;
  final String modelImage;
  final String segment;
  final String descriptions;
  final String oemName;
  final String oemImage;
  final double listPrice;
  final double mrpPrice;
  final int masterCartonSize;

  Datum({
    required this.id,
    required this.lucasTvsPartNo,
    required this.partImage,
    required this.filterType,
    required this.customerPartNo,
    required this.model,
    required this.modelImage,
    required this.segment,
    required this.descriptions,
    required this.oemName,
    required this.oemImage,
    required this.listPrice,
    required this.mrpPrice,
    required this.masterCartonSize,
  });

  factory Datum.fromJson(Map<String, dynamic> json) {
    return Datum(
      id: json['Id'],
      lucasTvsPartNo: json['LucasTvsPartNo'],
      partImage: json['PartImage'],
      filterType: json['FilterType'],
      customerPartNo: json['CustomerPartNo'],
      model: json['Model'],
      modelImage: json['ModelImage'],
      segment: json['Segment'],
      descriptions: json['Descriptions'],
      oemName: json['OEMName'],
      oemImage: json['OEMImage'],
      listPrice: json['ListPrice'].toDouble(),
      mrpPrice: json['MRPPrice'].toDouble(),
      masterCartonSize: json['MasterCartonSize'],
    );
  }
}

class Temperatures {
  String? result;
  List<Datum?>? data;

  Temperatures({this.result, this.data});

  Temperatures.fromJson(Map<String, dynamic> json) {
    result = json['result'];
    if (json['data'] != null) {
      data = <Datum>[];
      json['data'].forEach((v) {
        data!.add(Datum.fromJson(v));
      });
    }
  }
}

    And fetch the data from the internet:

    Future fetchData() async {
  try {
    var url = Uri.parse(u);

    var response = await http.get(url, headers: {
      "Accept": "application/json",
      "content-type": "application/json"
    });

    if (response.statusCode == 200) {
      return Temperatures.fromJson(
          jsonDecode(response.body) as Map<String, dynamic>);
    } else {
      throw Exception('Failed to load ');
    }
  } catch (e) {
    print(e.toString());
  }
}
    Login or Signup to reply.
  3. 0

    Here is your complete working code

    import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
//import 'package:sample_app/DbHelper/Product.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late Future _futureData;
  var result = "";
  @override
  void initState() {
    WidgetsFlutterBinding.ensureInitialized();
    _futureData = getData();
    super.initState();
  }

  Future getData() async {
    var url = Uri.parse(
        'http://35.154.214.176/LucasfilterAPI/api/Values/GetPricelist');
    var response = await http.get(url, headers: {
      "Accept": "application/json",
      "content-type": "application/json"
    });
    var jsonList = [];
    try {
      Map<String, dynamic> jsonMap =
          json.decode(response.body); //json.decode(response.body);
      result = jsonMap['result'];
      jsonList = List<Data>.from(
          jsonMap['data'].map((data) => Data.fromJson(data)).toList());

      print('length');
      print(jsonList.length);
      print(response.statusCode);
      print(response.body);
    } catch (ex) {
      print(ex);
    }
    // List<Product> Products =
    // List<Product>.from(jsonMap['data'].map((x) => Data.fromJson(x)));
    return jsonList;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
          future: _futureData,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(
                child: CircularProgressIndicator(),
              );
            } else if (snapshot.hasError) {
              return const Center(
                child: Text('Error fetching data'),
              );
            } else {
              List Data = snapshot.data;
              return ListView.builder(
                itemCount: Data.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Result: ${result}'), //${Data[index].result}'),
                    subtitle: Text(
                        'Data: ${Data[index].partImage.toString()}'), //${Data[index].data.toString()}'),
                  );
                },
              );
            }
          }),
    );
  }
}

class Temperatures {
  final String result;
  final List<Datum> data;

  Temperatures({
    required this.result,
    required this.data,
  });
}

class Datum {
  String? result;
  List<Data>? data;

  Datum({this.result, this.data});

  Datum.fromJson(Map<String, dynamic> json) {
    result = json['result'];
    if (json['data'] != null) {
      data = <Data>[];
      json['data'].forEach((v) {
        data!.add(new Data.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['result'] = this.result;
    if (this.data != null) {
      data['data'] = this.data!.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Data {
  int? id;
  String? lucasTvsPartNo;
  String? partImage;
  String? filterType;
  String? customerPartNo;
  String? model;
  String? modelImage;
  String? segment;
  String? descriptions;
  String? oEMName;
  String? oEMImage;
  String? oEMPartNo;
  double? listPrice;
  double? mRPPrice;
  int? masterCartonSize;

  Data(
      {this.id,
      this.lucasTvsPartNo,
      this.partImage,
      this.filterType,
      this.customerPartNo,
      this.model,
      this.modelImage,
      this.segment,
      this.descriptions,
      this.oEMName,
      this.oEMImage,
      this.oEMPartNo,
      this.listPrice,
      this.mRPPrice,
      this.masterCartonSize});

  Data.fromJson(Map<String, dynamic> json) {
    id = json['Id'];
    lucasTvsPartNo = json['LucasTvsPartNo'];
    partImage = json['PartImage'];
    filterType = json['FilterType'];
    customerPartNo = json['CustomerPartNo'];
    model = json['Model'];
    modelImage = json['ModelImage'];
    segment = json['Segment'];
    descriptions = json['Descriptions'];
    oEMName = json['OEMName'];
    oEMImage = json['OEMImage'];
    oEMPartNo = json['OEMPartNo'];
    listPrice = json['ListPrice'];
    mRPPrice = json['MRPPrice'];
    masterCartonSize = json['MasterCartonSize'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['Id'] = this.id;
    data['LucasTvsPartNo'] = this.lucasTvsPartNo;
    data['PartImage'] = this.partImage;
    data['FilterType'] = this.filterType;
    data['CustomerPartNo'] = this.customerPartNo;
    data['Model'] = this.model;
    data['ModelImage'] = this.modelImage;
    data['Segment'] = this.segment;
    data['Descriptions'] = this.descriptions;
    data['OEMName'] = this.oEMName;
    data['OEMImage'] = this.oEMImage;
    data['OEMPartNo'] = this.oEMPartNo;
    data['ListPrice'] = this.listPrice;
    data['MRPPrice'] = this.mRPPrice;
    data['MasterCartonSize'] = this.masterCartonSize;
    return data;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search