How to loop objects inside of list in ListView.Builder

Question

I am doing looping over the list items in ListView.builder

List _rBoxes = new List();//declare

the data i want to loop is seems like this:

{    
    "box_content": {
        "box_1": [
            {
                "id": "9",
                "name": "abc"
            },
            {
                "id": "10",
                "name": "xyz"
            }
        ],
        "box_2": [
            {
                "id": "8",
                "name": "acc"
            }
        ],
        "box_3": [
            {
                "id": "1",
                "name": "abc"
            }
        ],
        "box_4": [
            {
                "id": "4",
                "name": "amno"
            },
            {
                "id": "6",
                "name": "jkl"
            }
        ],
        "box_5": [
            {
                "id": "7",
                "name": "xre"
            }
        ]
    }    
}

then i add this items to the list

_rBoxes.addAll(data['box_content']);//it gives error - Unhandled Exception: type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'Iterable<dynamic>'

//widget design

ListView.builder(
                        physics: NeverScrollableScrollPhysics(),
                        itemCount: _rBoxItems.length,
                        itemBuilder: (BuildContext context, int index) {
                          return Text("${_rBoxItems[index]}",
                              style: TextStyle(fontSize: 20.0));
                        })

Error : //here i want to loop box_1 index (only) in list view, how to acheive this if i gave _rBoxItems['box_1'].length the error will occur . actucally am stuck in this scenario, help me to resolve this problem.

_rBoxes.addAll(data['box_content']); You want add all to rBoxes ? — John Joe
– John Joe, Commented Nov 21, 2020 at 6:39

Kavin-K · Accepted Answer · 2020-11-21 06:39:28Z

First you need to create Data model to parse your json data into a model, Data class should look like,

class Data {
  BoxContent boxContent;

  Data({this.boxContent});

  Data.fromJson(Map<String, dynamic> json) {
    boxContent = json['box_content'] != null
        ? new BoxContent.fromJson(json['box_content'])
        : null;
  }

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

class BoxContent {
  List<Box> box;

  BoxContent({this.box});

  BoxContent.fromJson(Map<String, dynamic> json) {
    if (json['box'] != null) {
      box = new List<Box>();
      json['box'].forEach((v) {
        box.add(new Box.fromJson(v));
      });
    }
  }

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

class Box {
  String id;
  String name;

  Box({this.id, this.name});

  Box.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    return data;
  }
}

Then parse json data into your Data model like,

import 'dart:convert';  // import this


String jsonData = "{ ... }" // your json as string

Data _data= Data.fromJson(jsonDecode(jsonData));

Finally you can achieve what you required,

ListView.builder(
    physics: NeverScrollableScrollPhysics(),
    itemCount: _rBoxItems.length,
    itemBuilder: (BuildContext context, int index) {
        return Text(_data.boxContent.box[index].length.toString(),
            style: TextStyle(fontSize: 20.0),
        );
}),

Note: You can simply generate models to parse, from json data here

Onur · Accepted Answer · 2020-11-21 06:52:32Z

1

I think you want to iterate Box Context. If you fetch data from an API firstly you should create your data models and for that you can use app.quicktype.io it is working very well for dart. When I add your Box_1 content to there it gave to me a object like that.

After creating your data models. You can use this function to get object from json string and you can convert them to a list. Box.fromJson(String str) => Box.fromMap(json.decode(str));

answered Nov 21, 2020 at 6:52

Onur

3164 silver badges14 bronze badges

Comments

hysunny · Accepted Answer · 2020-11-21 06:44:26Z

0

because you're data['box_content'] is a Map, but _rBoxes.addAll needs a List, So it's going to report an error:

Unhandled Exception: type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'Iterable<dynamic>

you should convert data['box_content'] to List, like this:

_rBoxes.addAll(data['box_content'].entries.map((entry) => { entry.key, entry.value }).toList());

hope helpful ^_^

answered Nov 21, 2020 at 6:44

hysunny

1111 silver badge8 bronze badges

3 Comments

KARTHIKEYAN N Over a year ago

yes its cleared the error, but i want to loop only the box_1 object in list view builder, currently it loops full object inside of box_content. @hysunny

hysunny Over a year ago

ok~ Actually, it is easy to get box_1 after you convert Map to List, you can use List[0].

KARTHIKEYAN N Over a year ago

u mean this: ListView.builder(itemCount: _rBoxItems[0].length,itemBuilder: (BuildContext context, int index) { return Text(_rBoxItems[0][index].toString()); })

Collectives™ on Stack Overflow

How to loop objects inside of list in ListView.Builder

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related