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

Question

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.

Answer 1

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

But if you have null values, you must change for example String to String? and remove the required or use ?? to assign default values if it null like: model: json['Model'] ?? '-',

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

And you can access data using:

Temperatures result = await fetchData();
List<Datum> data = result.data;

Answer 2

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

Answer 3

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.