How to display JSON data which is in Array list format

Question

I need a quick help for the syntax to display JSON data which are in array list format(I guess) I'm able to display Status & Message but struggling with syntax when I want to display Name Image which are inside Data[]. What syntax I should use to display those data ?

My JSON response

    {
    "Status": "1",
    "Message": "3 records found.",
    "Data": [
        {
            "Name": "Brain surgery",
            "EncId": "B909+U0FIAHIs+sl3IYTvQ==",
            "Image": "",
            "Extra1": "abdsjh dsgjhgdd gsjjkdkds dddsjkhdj djdjkdh dshjdkhkd dhdhdk sjkghdjkdhkhd dhkdkhdkjhd hkjhkdhd kdjkdjdkjd dhkdkjhdjh ddkdkhd dhdhhd . dgjgdjd dgdgjds",
            "Extra2": "",
            "ResultFor": "p6r4bAAI4ybdJySoV+PqGQ=="
        },
        {
            "Name": "Dr Ram Das",
            "EncId": "fXVmzecGStqrhx1PmIgwlQ==",
            "Image": "http://medbo.digitalicon.in/Doctor/U7MK2MZGD0QVQ7E8IR7N.jpg",
            "Extra1": "ENT",
            "Extra2": "kj",
            "ResultFor": "xPCleDOirQpArdOv0uUR9g=="
        },
        {
            "Name": "Kidney Routine Test with Sonography and Serology.",
            "EncId": "U4exk+vfMGrn7cjNUa/PBw==",
            "Image": "",
            "Extra1": "",
            "Extra2": "",
            "ResultFor": "aZsjjLg3WIBbTg05/15o2w=="
        }
    ]
}

My model class

class SearchApiResponse {
    SearchApiResponse({
        required this.status,
        required this.message,
        required this.data,
    });

    String status;
    String message;
    List<SearchData> data;

    factory SearchApiResponse.fromJson(Map<String, dynamic> json) => SearchApiResponse(
        status: json["Status"],
        message: json["Message"],
        data: List<SearchData>.from(json["Data"].map((x) => SearchData.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "Status": status,
        "Message": message,
        "Data": List<dynamic>.from(data.map((x) => x.toJson())),
    };
}

class SearchData {
    SearchData({
        required this.name,
        required this.encId,
        required this.image,
        required this.extra1,
        required this.extra2,
        required this.resultFor,
    });

    String name;
    String encId;
    String image;
    String extra1;
    String extra2;
    String resultFor;

    factory SearchData.fromJson(Map<String, dynamic> json) => SearchData(
        name: json["Name"],
        encId: json["EncId"],
        image: json["Image"],
        extra1: json["Extra1"],
        extra2: json["Extra2"],
        resultFor: json["ResultFor"],
    );

    Map<String, dynamic> toJson() => {
        "Name": name,
        "EncId": encId,
        "Image": image,
        "Extra1": extra1,
        "Extra2": extra2,
        "ResultFor": resultFor,
    };
}

And Here I can successfully display Status & the message but how to display others which are inside Data[] ?

class AfterSearchPage extends StatefulWidget {
  final SearchApiResponse rresponse;
  const AfterSearchPage({required this.rresponse});

  @override
  _AfterSearchPageState createState() => _AfterSearchPageState();
}

class _AfterSearchPageState extends State<AfterSearchPage> {
  var responseRef;
  //  _SecondState(this.responseRef);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Status: ${widget.rresponse.status}"),
              Text("Message: ${widget.rresponse.message}"),
              Text("Name: ${widget.rresponse.data.name}"),//==??????????????????????????????????????Error 
              SizedBox(
                height: 50,
              ),

              OutlinedButton.icon(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => Home2(),
                      ),
                    );
                  },
                  icon: Icon(
                    Icons.exit_to_app,
                    size: 18,
                  ),
                  label: Text("GoTo Home")),
            ],
          ),
        ),
      ),
    );
  }
}

Alex Domenici · Accepted Answer · 2021-08-19 15:03:10Z

Data is an array, so you need to address it as such.

for (var d in folder.data) {
  print(d.name);
}

Here's a sample project to show you that:

import 'dart:convert';

void main() {
  final folder = Folder.fromJson(json.decode('''{
    "Status": "1",
    "Message": "3 records found.",
    "Data": [
        {
            "Name": "Brain surgery",
            "EncId": "B909+U0FIAHIs+sl3IYTvQ==",
            "Image": "",
            "Extra1": "abdsjh dsgjhgdd gsjjkdkds dddsjkhdj djdjkdh dshjdkhkd dhdhdk sjkghdjkdhkhd dhkdkhdkjhd hkjhkdhd kdjkdjdkjd dhkdkjhdjh ddkdkhd dhdhhd . dgjgdjd dgdgjds",
            "Extra2": "",
            "ResultFor": "p6r4bAAI4ybdJySoV+PqGQ=="
        },
        {
            "Name": "Dr Ram Das",
            "EncId": "fXVmzecGStqrhx1PmIgwlQ==",
            "Image": "http://medbo.digitalicon.in/Doctor/U7MK2MZGD0QVQ7E8IR7N.jpg",
            "Extra1": "ENT",
            "Extra2": "kj",
            "ResultFor": "xPCleDOirQpArdOv0uUR9g=="
        },
        {
            "Name": "Kidney Routine Test with Sonography and Serology.",
            "EncId": "U4exk+vfMGrn7cjNUa/PBw==",
            "Image": "",
            "Extra1": "",
            "Extra2": "",
            "ResultFor": "aZsjjLg3WIBbTg05/15o2w=="
        }
    ]
}'''));
  
  print(folder.status);
  print(folder.message);

  for (var d in folder.data) {
    print(d.name);
  }
}

class Folder {
    Folder({
        this.status,
        this.message,
        this.data,
    });

    String status;
    String message;
    List<Data> data;

    factory Folder.fromJson(Map<String, dynamic> json) => Folder(
        status: json["Status"],
        message: json["Message"],
        data: List<Data>.from(json["Data"].map((x) => Data.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "Status": status,
        "Message": message,
        "Data": List<dynamic>.from(data.map((x) => x.toJson())),
    };
}

class Data {
    Data({
        this.name,
        this.encId,
        this.image,
        this.extra1,
        this.extra2,
        this.resultFor,
    });

    String name;
    String encId;
    String image;
    String extra1;
    String extra2;
    String resultFor;

    factory Data.fromJson(Map<String, dynamic> json) => Data(
        name: json["Name"],
        encId: json["EncId"],
        image: json["Image"],
        extra1: json["Extra1"],
        extra2: json["Extra2"],
        resultFor: json["ResultFor"],
    );

    Map<String, dynamic> toJson() => {
        "Name": name,
        "EncId": encId,
        "Image": image,
        "Extra1": extra1,
        "Extra2": extra2,
        "ResultFor": resultFor,
    };
}

You can test this code in dartpad: https://dartpad.dartlang.org

Said Kurt · Accepted Answer · 2021-08-19 14:55:18Z

1

just give the index number

Text("Name: ${widget.rresponse.data[0].name}")

answered Aug 19, 2021 at 14:55

Said Kurt

1047 bronze badges

1 Comment

Tuhin Over a year ago

what if I want all the names in that array? what I'm trying explain I don't want to specify name by giving array index number data[0] data[1]

Collectives™ on Stack Overflow

How to display JSON data which is in Array list format

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related