Flutter json 数组解析

Question

我知道这是一个常见问题，但我没有找到任何解决方案，所以我在这里提出一个问题。

JSON格式如下，

[
  {
    "id": "127",
    "image": "https://www.website.com/imgFldr/app/app-bangalore3.jpg",
    "city": "Bangalore",
    "store_mobile": "+91-978XXXXXXX",
    "search_by": "Search one",
    "url": "image url",
    "store_address": "Address 1"
  },
  {
    "id": "128",
    "image": "https://www.website.com/imgFldr/app/app-bangalore2.jpg",
    "city": "Bangalore",
    "store_mobile": "+91-978XXXXXXX",
    "search_by": "Search 2",
    "url": "image url",
    "store_address": "Address 2"
  },
  {
    "id": "137",
    "image": "https://www.website.com/imgFldr/app/app-bangalore.jpg",
    "city": "Bangalore",
    "store_mobile": "+91-978XXXXXXX",
    "search_by": "Search 3",
    "url": "image url",
    "store_address": "Address 3"
  },
  {
    "id": "132",
    "image": "https://www.website.com/imgFldr/app/app-mumbai-2.jpg",
    "city": "Mumbai",
    "store_mobile": "+91-978XXXXXXX",
    "search_by": "Search 4",
    "url": "image url",
    "store_address": "Address 4"
  },
  {
    "id": "139",
    "image": "https://www.website.com/imgFldr/app/app-mumbai.jpg",
    "city": "Mumbai",
    "store_mobile": "+91-978XXXXXXX",
    "search_by": "Search 5",
    "url": "image url",
    "store_address": "Address 5"
  }
]

响应以数组的形式出现。 我喜欢这个，模型类

class Stores {
String id;
String image;
String city;
String storeMobile;
String searchBy;
String url;
String storeAddress;

Stores(
  {this.id,
  this.image,
  this.city,
  this.storeMobile,
  this.searchBy,
  this.url,
  this.storeAddress});

Stores.fromJson(Map<String, dynamic> json) {
id = json['id'];
image = json['image'];
city = json['city'];
storeMobile = json['store_mobile'];
searchBy = json['search_by'];
url = json['url'];
storeAddress = json['store_address'];
}

Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
data['image'] = this.image;
data['city'] = this.city;
data['store_mobile'] = this.storeMobile;
data['search_by'] = this.searchBy;
data['url'] = this.url;
data['store_address'] = this.storeAddress;
return data;
 }
}

在 main.dart 类里面

List<Stores> storeList = new List();
Future<Null> getStoresData() async {
setState(() {
  loading = true;
});

final response = await http.get(Uri.encodeFull(APIs.url_getStoreData));
List<dynamic> list = jsonDecode(utf8.decode(response.bodyBytes));

Stores str = Stores.fromJson(list[0]);

storeList.add(str);
print("list Value : $list");
print("Store : $storeList");

setState(() {
  loading = false;
});
}

JSON 以单个字符串形式出现。 我无法在 ListTiles 上使用它，因为

storeList[index]['city'],

当我尝试 print('Size : $storeList.length'); 它只打印 =1

请帮助和谢谢。

Answer 1

使用列表构建器

_StoreListAPI() async {
final response = await http.get(
 APINAME,
);
if (response.statusCode == 200) {
  final result = json.decode(response.body);
  List<dynamic> list = result;
  print("response----$result");
  List<Stores> storelist= list.map((i) => Stores.fromJson(i)).toList();
  print("response--22--"+list_[0].toJson().toString());
  setState(() => {
    _storelist = storelist,
    isLoading  = false
  });

} else {
  setState(() => {
    isLoading  = false
  });

}  }

小工具

 body:FutureBuilder<List<Stores>>(
            future: _storelist
            builder: (BuildContext context, AsyncSnapshot<List<Stores>> snapshot) {
              if (snapshot.data !=null) {
                return ListView.builder(
                  physics: BouncingScrollPhysics(),
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int index) {
    return  ListTile()
    })}});

Answer 2

长度即将到来，因为您只向列表中添加了一个项目。
您如何将整个列表转换为您的模型

List<Stores> storeList = new List();
Future<Null> getStoresData() async {
setState(() {
loading = true;
});

final response = await http.get(Uri.encodeFull(APIs.url_getStoreData));
List<dynamic> list = jsonDecode(utf8.decode(response.bodyBytes));

for(int i = 0 ; i<list.length;i++)
storeList.add(Stores.fromJson(list[i]));

print("list Value : $list");
print("Store : $storeList");

setState(() {
 loading = false;
});
}