How to read json array from json response in flutter ? I am new in flutter Please help me

Question

Below is my json response, i want to get this response into model and nested model class. Please help me to read this json. Thanks in advance. I am new in flutter to parse json response in model class.

'''
{
"success": 1,
"totalResults": 5,
"data": [
     {
        "id": 1,
        "bank_name": "SBI bank",
        "bank_logo": "http://3.143.33.201/assets/banklogo/1/sbi-round-logo.png",
        "bank_desc": "sbi",
        "rating": "AA"
    },
    {
        "id": 2,
        "bank_name": "Yes bank",
        "bank_logo": "http://3.143.33.201/assets/banklogo/2/yes-round-logo.png",
        "bank_desc": "Yes bank",
        "rating": "AA"
    },
    {
        "id": 3,
        "bank_name": "Union bank",
        "bank_logo": "http://3.143.33.201/assets/banklogo/3/union-round-logo.png",
        "bank_desc": "union bank",
        "rating": "AA"
    },
    {
        "id": 9,
        "bank_name": "Bank of Baroda",
        "bank_logo": "http://3.143.33.201/assets/banklogo/9/bob.png",
        "bank_desc": "Bank of Baroda",
        "rating": "AA"
    },
    {
        "id": 10,
        "bank_name": "IndusInd Bank",
        "bank_logo": "http://3.143.33.201/assets/banklogo/10/Indus-bank-2.png",
        "bank_desc": "IndusInd Bank",
        "rating": "AA"
    }
]

}

'''

Answer 1

We have a inbuilt package in dart for it,

dart:convert, the usage is as follows

import 'dart:convert' as convert;
...
// perform your http request and get the response from it,
var responseData = convert.jsonDecode(response.body);

convert.jsonDecode() will enable accessing the data stores in the responseData with key values.

@note : I have imported it as convert as for my convenience as I don't get confused while development.

Happy coding

Answer 2

You can use JSON and serialization for this

final _response = jsonDecode(jsonResponse);

After that you can use _response data in your model class like this

YourModel.fromJson(_response);

Initialize your model and use like this

final YourModel _yourModel = YourModel();
final _isSuccess = _yourModel.success;
final _data = _yourModel.data;

Answer 3

Step 1 >

Creat BankDataModel.dart

class BankDataModel {
  int? success;
  int? totalResults;
  List<Data>? data;

  BankDataModel({this.success, this.totalResults, this.data});

  BankDataModel.fromJson(Map<String, dynamic> json) {
    success = json['success'];
    totalResults = json['totalResults'];
    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['success'] = this.success;
    data['totalResults'] = this.totalResults;
    if (this.data != null) {
      data['data'] = this.data!.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Data {
  int? id;
  String? bankName;
  String? bankLogo;
  String? bankDesc;
  String? rating;

  Data({this.id, this.bankName, this.bankLogo, this.bankDesc, this.rating});

  Data.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    bankName = json['bank_name'];
    bankLogo = json['bank_logo'];
    bankDesc = json['bank_desc'];
    rating = json['rating'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['bank_name'] = this.bankName;
    data['bank_logo'] = this.bankLogo;
    data['bank_desc'] = this.bankDesc;
    data['rating'] = this.rating;
    return data;
  }
}

Step 2>

Crete Object you want use

BankDataModel _bankDataModel = BankDataModel();

Step 3>

Api call

  Future<BankDataModel> getData() async {
    BankDataModel _bankDataModel = BankDataModel();
    final url = 'your-url';

    try {
      final response = await client.get(url);
      if (response.statusCode == 200) {
        _bankDataModel = BankDataModel.fromJson(response.data); < -- Here Json to BankDataModel Convert..
        print(_bankDataModel.totalResults.toString()); < -- here print 5 as per question.
        return _bankDataModel;
      } else {
        print(response.statusCode);
        throw response.statusCode;
      }
    } catch (error) {
      print(error);
    }
  }

Thanks you. Happy to help you.