how to convert json objects into lists, to be displayed in listview.builder

Question

I have a problem here, so I am given a json in the form of an object and inside that object I have to display the data in a list, my question is a bit difficult here because the data is in the form of an object, but if the data is in the form of an array/list I can display it in a listview but here the json data is in the form of an object. Has anyone here ever had a similar case? and have examples for me to study thank you, have a good day

{
    "status": "success",
    "code": "200",
    "data": {
        "1": {
            "id": "a1928aaf-e8d2-407c-b10d-7d368c71905f",
            "id_dosen": "5eb3804c-ff71-449c-bbdf-8d89005734f3",
            "id_mk": "a17ea90a-4e92-4bb2-bfe4-3efcfe90d190",
            "nidn": null,
            "dosen": "Yanyan Suryana ",
            "id_kelas_kuliah": "9b29eaea-0dbe-4eb7-885d-4b1016e2026d",
            "kelas_kuliah": "KPAM I (Chr. Build) - Perbankan Syariah - A",
            "prodi": "Perbankan Syariah",
            "kelas": "REGULER",
            "semester": "1",
            "kelompok_kelas": "A",
            "kode": null,
            "sks": 1,
            "jumlah_kelas": 0,
            "matakuliah": "KPAM I (Chr. Build) ( KPAM I (Chr. Build) ) - A",
            "smt": "2022-2023 GANJIL",
            "bobot_sks": 1,
            "rencana_pertemuan": 16,
            "jenis_evaluasi": "KOGNITIF/PENGETAHUAN",
            "created_at": "2022-09-06 07:11:12",
            "updated_at": "2022-09-06 07:11:12",
            "created_by": "Dasep",
            "updated_by": "Dasep"
        },
        "2": {
            "id": "708c82bc-1fe5-4529-8c3d-2522c48fee23",
            "id_dosen": "64592de2-743e-4d38-9d74-6f83776b2382",
            "id_mk": "61289350-447b-40cc-86c6-27d806b932a7",
            "nidn": null,
            "dosen": "Putri Zafira Ruhliandini",
            "id_kelas_kuliah": "52aa6c84-5d07-4deb-8122-60d3465bf10c",
            "kelas_kuliah": "Lembaga Keuangan Bank & Non Bank - Perbankan Syariah - A",
            "prodi": "Perbankan Syariah",
            "kelas": "REGULER",
            "semester": "1",
            "kelompok_kelas": "A",
            "kode": null,
            "sks": 2,
            "jumlah_kelas": 0,
            "matakuliah": "Lembaga Keuangan Bank & Non Bank ( Bank & Non-Bank Financial Institutions ) - A",
            "smt": "2022-2023 GANJIL",
            "bobot_sks": 2,
            "rencana_pertemuan": 16,
            "jenis_evaluasi": "EVALUASI AKADEMIK",
            "created_at": "2022-09-06 07:16:52",
            "updated_at": "2022-09-06 07:16:52",
            "created_by": "Dasep",
            "updated_by": "Dasep"
        },
        "3": {
            "id": "6c2cdc1f-f87f-4ca2-9e6c-d56c01172fe1",
            "id_dosen": "d6aedfb6-cf88-4e89-8365-0f206822a6c4",
            "id_mk": "0deb6dda-dfe8-4a3e-a1b6-39bbb82874ad",
            "nidn": null,
            "dosen": "Yudhy",
            "id_kelas_kuliah": "a0f8d5ab-13e7-402c-a104-fde9746b8929",
            "kelas_kuliah": "Sejarah Ekonomi & Perbankan Islam - Perbankan Syariah - A",
            "prodi": "Perbankan Syariah",
            "kelas": "REGULER",
            "semester": "1",
            "kelompok_kelas": "A",
            "kode": null,
            "sks": 3,
            "jumlah_kelas": 0,
            "matakuliah": "Sejarah Ekonomi & Perbankan Islam ( History of Islamic Economics & Banking ) - A",
            "smt": "2022-2023 GANJIL",
            "bobot_sks": 3,
            "rencana_pertemuan": 16,
            "jenis_evaluasi": "EVALUASI AKADEMIK",
            "created_at": "2022-09-06 07:23:42",
            "updated_at": "2022-09-06 07:23:42",
            "created_by": "Dasep",
            "updated_by": "Dasep"
        },
        "4": {
            "id": "910a51a7-926a-40df-ae6c-84508487170c",
            "id_dosen": "40b65274-81ab-4144-ae18-795da53554df",
            "id_mk": "0965b6b8-abc8-4188-a785-f6e56e7437ca",
            "nidn": null,
            "dosen": "Yasir M. Fauzi",
            "id_kelas_kuliah": "e9cac682-ac66-43d4-a664-c82b45f5a97a",
            "kelas_kuliah": "Hadits Ekonomi - Perbankan Syariah - A",
            "prodi": "Perbankan Syariah",
            "kelas": "REGULER",
            "semester": "1",
            "kelompok_kelas": "A",
            "kode": null,
            "sks": 2,
            "jumlah_kelas": 0,
            "matakuliah": "Hadits Ekonomi ( Economic Hadith ) - A",
            "smt": "2022-2023 GANJIL",
            "bobot_sks": 2,
            "rencana_pertemuan": 16,
            "jenis_evaluasi": "EVALUASI AKADEMIK",
            "created_at": "2022-09-06 07:39:48",
            "updated_at": "2022-09-06 07:39:48",
            "created_by": "Dasep",
            "updated_by": "Dasep"
        },
        "5": {
            "id": "e5ddedfc-3f26-4b9e-a5b6-a880a2255139",
            "id_dosen": "42603f53-01b5-4469-ac40-771f23184a01",
            "id_mk": "96712436-0f5e-4f94-8deb-a933b8cf1916",
            "nidn": null,
            "dosen": "Ade Iskandar Nasution",
            "id_kelas_kuliah": "25ea99bd-a7ac-4db6-ad4c-2e247dbe4ae1",
            "kelas_kuliah": "Bahasa Inggris 1 (For Banking) - Perbankan Syariah - A",
            "prodi": "Perbankan Syariah",
            "kelas": "REGULER",
            "semester": "1",
            "kelompok_kelas": "A",
            "kode": null,
            "sks": 2,
            "jumlah_kelas": 0,
            "matakuliah": "Bahasa Inggris 1 (For Banking) ( English 1 (For Banking) ) - A",
            "smt": "2022-2023 GANJIL",
            "bobot_sks": 2,
            "rencana_pertemuan": 16,
            "jenis_evaluasi": "KOGNITIF/PENGETAHUAN",
            "created_at": "2022-09-06 07:42:35",
            "updated_at": "2022-09-06 07:42:35",
            "created_by": "Dasep",
            "updated_by": "Dasep"
        },
        "6": {
            "id": "2492b7a4-962e-4167-9d63-d72d1d2d47a3",
            "id_dosen": "feeaecb5-d7ff-45c1-b741-234cf9d99c83",
            "id_mk": "f7f7851d-bce6-49c6-8228-3fe54c6911f3",
            "nidn": null,
            "dosen": "Faisal Rakhman",
            "id_kelas_kuliah": "1fe74679-b9cd-4ab2-a753-1c98212ec7c0",
            "kelas_kuliah": "Dasar Akuntansi 1 - Perbankan Syariah - A",
            "prodi": "Perbankan Syariah",
            "kelas": "REGULER",
            "semester": "1",
            "kelompok_kelas": "A",
            "kode": null,
            "sks": 3,
            "jumlah_kelas": 0,
            "matakuliah": "Dasar Akuntansi 1 ( Basic Accounting 1 ) - A",
            "smt": "2022-2023 GANJIL",
            "bobot_sks": 3,
            "rencana_pertemuan": 16,
            "jenis_evaluasi": "KOGNITIF/PENGETAHUAN",
            "created_at": "2022-09-06 07:45:48",
            "updated_at": "2022-09-06 07:45:48",
            "created_by": "Dasep",
            "updated_by": "Dasep"
        },
        "7": {
            "id": "1bb2ff62-df42-4995-92c1-667e0c0d29c9",
            "id_dosen": "0e694ee7-04d0-4a3b-abe0-a21d36d62e7c",
            "id_mk": "85a4c5b9-085b-44c9-ae42-abd185e11f01",
            "nidn": null,
            "dosen": "Kanda M Ishak",
            "id_kelas_kuliah": "ca6c78a4-61eb-4f6e-acb7-482fd2200c12",
            "kelas_kuliah": "Aplikasi Komputer I (Ms. Word & Excel) - Perbankan Syariah - A",
            "prodi": "Perbankan Syariah",
            "kelas": "REGULER",
            "semester": "1",
            "kelompok_kelas": "A",
            "kode": null,
            "sks": 2,
            "jumlah_kelas": 0,
            "matakuliah": "Aplikasi Komputer I (Ms. Word & Excel) ( Computer Application I (Ms. Word & Excel) ) - A",
            "smt": "2022-2023 GANJIL",
            "bobot_sks": 2,
            "rencana_pertemuan": 16,
            "jenis_evaluasi": "KOGNITIF/PENGETAHUAN",
            "created_at": "2022-09-06 07:48:56",
            "updated_at": "2022-09-06 07:48:56",
            "created_by": "Dasep",
            "updated_by": "Dasep"
        },
        "8": {
            "id": "64ffa430-5301-4fa0-9449-c3e2f85a71e7",
            "id_dosen": "c4b5bb76-8eea-4f8a-802e-bc500753a912",
            "id_mk": "b153397d-eb8e-4b1f-9730-4249ef19f8cd",
            "nidn": null,
            "dosen": "Mimin Mintarsih",
            "id_kelas_kuliah": "9066d7fd-432d-4ada-a6f0-3e1c677536ed",
            "kelas_kuliah": "Ulumul Qur'an dan Hadits - Perbankan Syariah - A",
            "prodi": "Perbankan Syariah",
            "kelas": "REGULER",
            "semester": "1",
            "kelompok_kelas": "A",
            "kode": null,
            "sks": 2,
            "jumlah_kelas": 0,
            "matakuliah": "Ulumul Qur'an dan Hadits ( Ulumul Qur'an and Hadith ) - A",
            "smt": "2022-2023 GANJIL",
            "bobot_sks": 2,
            "rencana_pertemuan": 16,
            "jenis_evaluasi": "KOGNITIF/PENGETAHUAN",
            "created_at": "2022-09-06 07:51:55",
            "updated_at": "2022-09-06 07:51:55",
            "created_by": "Dasep",
            "updated_by": "Dasep"
        },
        "9": {
            "id": "f554093f-f86b-4489-8f17-3785c1a5c60a",
            "id_dosen": "40b65274-81ab-4144-ae18-795da53554df",
            "id_mk": "2a90cc9b-e8a6-4b7d-b293-794ce71f8855",
            "nidn": null,
            "dosen": "Yasir M. Fauzi",
            "id_kelas_kuliah": "be9a777d-af6b-4b90-983d-cd858382862c",
            "kelas_kuliah": "Studi Islam I (Fiqih Ibadah) - Perbankan Syariah - A",
            "prodi": "Perbankan Syariah",
            "kelas": "REGULER",
            "semester": "1",
            "kelompok_kelas": "A",
            "kode": null,
            "sks": 2,
            "jumlah_kelas": 0,
            "matakuliah": "Studi Islam I (Fiqih Ibadah) ( Islamic Studies I (Fiqh Worship) ) - A",
            "smt": "2022-2023 GANJIL",
            "bobot_sks": 2,
            "rencana_pertemuan": 16,
            "jenis_evaluasi": "KOGNITIF/PENGETAHUAN",
            "created_at": "2022-09-06 07:59:35",
            "updated_at": "2022-09-06 07:59:35",
            "created_by": "Dasep",
            "updated_by": "Dasep"
        },
        "10": {
            "id": "8f804988-9d50-4499-b01b-6de90fcd95f4",
            "id_dosen": "43cda764-1dbb-47cc-adac-fe3663c987fe",
            "id_mk": "2286f1cd-242f-4e27-9428-63d1d993a479",
            "nidn": null,
            "dosen": "Bahmid I. Magi",
            "id_kelas_kuliah": "70903e13-f12c-41fc-b74e-5125c120afd4",
            "kelas_kuliah": "Pendidikan Kewarganegaraan - Perbankan Syariah - A",
            "prodi": "Perbankan Syariah",
            "kelas": "REGULER",
            "semester": "1",
            "kelompok_kelas": "A",
            "kode": null,
            "sks": 2,
            "jumlah_kelas": 0,
            "matakuliah": "Pendidikan Kewarganegaraan ( Civic education ) - A",
            "smt": "2022-2023 GANJIL",
            "bobot_sks": 2,
            "rencana_pertemuan": 16,
            "jenis_evaluasi": "KOGNITIF/PENGETAHUAN",
            "created_at": "2022-09-06 08:14:18",
            "updated_at": "2022-09-06 08:14:18",
            "created_by": "Dasep",
            "updated_by": "Dasep"
        }
    }
}

example of the requested result into a list/card

Shakila · Accepted Answer · 2022-12-08 03:10:08Z

1

Convert your json using Quicktype.io like this

// To parse this JSON data, do
//
//     final test = testFromMap(jsonString);

import 'dart:convert';

Test testFromMap(String str) => Test.fromMap(json.decode(str));

String testToMap(Test data) => json.encode(data.toMap());

class Test {
    Test({
        this.status,
        this.code,
        this.data,
    });

    String status;
    String code;
    Data data;

    factory Test.fromMap(Map<String, dynamic> json) => Test(
        status: json["status"],
        code: json["code"],
        data: Data.fromMap(json["data"]),
    );

    Map<String, dynamic> toMap() => {
        "status": status,
        "code": code,
        "data": data.toMap(),
    };
}

class Data {
    Data({
        this.the1,
    });

    The1 the1;

    factory Data.fromMap(Map<String, dynamic> json) => Data(
        the1: The1.fromMap(json["1"]),
    );

    Map<String, dynamic> toMap() => {
        "1": the1.toMap(),
    };
}

class The1 {
    The1({
        this.id,
        this.idDosen,
        this.idMk,
        this.nidn,
        this.dosen,
        this.idKelasKuliah,
        this.kelasKuliah,
        this.prodi,
        this.kelas,
        this.semester,
        this.kelompokKelas,
        this.kode,
        this.sks,
        this.jumlahKelas,
        this.matakuliah,
        this.smt,
        this.bobotSks,
        this.rencanaPertemuan,
        this.jenisEvaluasi,
        this.createdAt,
        this.updatedAt,
        this.createdBy,
        this.updatedBy,
    });

    String id;
    String idDosen;
    String idMk;
    dynamic nidn;
    String dosen;
    String idKelasKuliah;
    String kelasKuliah;
    String prodi;
    String kelas;
    String semester;
    String kelompokKelas;
    dynamic kode;
    int sks;
    int jumlahKelas;
    String matakuliah;
    String smt;
    int bobotSks;
    int rencanaPertemuan;
    String jenisEvaluasi;
    DateTime createdAt;
    DateTime updatedAt;
    String createdBy;
    String updatedBy;

    factory The1.fromMap(Map<String, dynamic> json) => The1(
        id: json["id"],
        idDosen: json["id_dosen"],
        idMk: json["id_mk"],
        nidn: json["nidn"],
        dosen: json["dosen"],
        idKelasKuliah: json["id_kelas_kuliah"],
        kelasKuliah: json["kelas_kuliah"],
        prodi: json["prodi"],
        kelas: json["kelas"],
        semester: json["semester"],
        kelompokKelas: json["kelompok_kelas"],
        kode: json["kode"],
        sks: json["sks"],
        jumlahKelas: json["jumlah_kelas"],
        matakuliah: json["matakuliah"],
        smt: json["smt"],
        bobotSks: json["bobot_sks"],
        rencanaPertemuan: json["rencana_pertemuan"],
        jenisEvaluasi: json["jenis_evaluasi"],
        createdAt: DateTime.parse(json["created_at"]),
        updatedAt: DateTime.parse(json["updated_at"]),
        createdBy: json["created_by"],
        updatedBy: json["updated_by"],
    );

    Map<String, dynamic> toMap() => {
        "id": id,
        "id_dosen": idDosen,
        "id_mk": idMk,
        "nidn": nidn,
        "dosen": dosen,
        "id_kelas_kuliah": idKelasKuliah,
        "kelas_kuliah": kelasKuliah,
        "prodi": prodi,
        "kelas": kelas,
        "semester": semester,
        "kelompok_kelas": kelompokKelas,
        "kode": kode,
        "sks": sks,
        "jumlah_kelas": jumlahKelas,
        "matakuliah": matakuliah,
        "smt": smt,
        "bobot_sks": bobotSks,
        "rencana_pertemuan": rencanaPertemuan,
        "jenis_evaluasi": jenisEvaluasi,
        "created_at": createdAt.toIso8601String(),
        "updated_at": updatedAt.toIso8601String(),
        "created_by": createdBy,
        "updated_by": updatedBy,
    };
}

after that when you call your API you need to parse your json response to this object

I assume you are using a future builder then use like this

Container(
        child: FutureBuilder(
            future: getJsonData(),/your API call
            builder: (context, AsyncSnapshot<dynamic> snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data[0].time);
              } else {
                return CircularProgressIndicator();
              }
            }),
      ),

edited Dec 8, 2022 at 3:10

answered Dec 8, 2022 at 3:04

Shakila

1,0771 gold badge7 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

sharon Over a year ago

means if I want to retrieve the data I call class The1 List<The1> data = [];

Shakila Over a year ago

are you getting this json from api calling?

sharon Over a year ago

no, but when initializing it in the widget

sharon Over a year ago

do I have to return listview.builder when I want to display it in listview.builder?

Shakila Over a year ago

you need to use listview or listview.builder for showing all the data but I m not sure which one to use

|

Bawantha · Accepted Answer · 2022-12-08 03:49:32Z

One alternative methond is to use jsonPath

import 'dart:convert';

import 'package:json_path/json_path.dart';

void main() {
  final json = jsonDecode('''
{
  "store": {
    "book": [
      {
        "category": "reference",
        "author": "Nigel Rees",
        "title": "Sayings of the Century",
        "price": 8.95
      },
      {
        "category": "fiction",
        "author": "Evelyn Waugh",
        "title": "Sword of Honour",
        "price": 12.99
      },
      {
        "category": "fiction",
        "author": "Herman Melville",
        "title": "Moby Dick",
        "isbn": "0-553-21311-3",
        "price": 8.99
      },
      {
        "category": "fiction",
        "author": "J. R. R. Tolkien",
        "title": "The Lord of the Rings",
        "isbn": "0-395-19395-8",
        "price": 22.99
      }
    ],
    "bicycle": {
      "color": "red",
      "price": 19.95
    }
  }
}  
  ''');

  final prices = JsonPath(r'$..price');

  print('All prices in the store:');

  /// The following code will print:
  ///
  /// $['store']['book'][0]['price']:   8.95
  /// $['store']['book'][1]['price']:   12.99
  /// $['store']['book'][2]['price']:   8.99
  /// $['store']['book'][3]['price']:   22.99
  /// $['store']['bicycle']['price']:   19.95
  prices
      .read(json)
      .map((match) => '${match.path}:\t${match.value}')
      .forEach(print);
}```

Collectives™ on Stack Overflow

how to convert json objects into lists, to be displayed in listview.builder

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related