如何在flutter中使用listview.builder中的json数据

Question

我得到的 json 响应为

{
    "cities": [
        {
            "CTID": "5",
            "City": "Hatkanangle",
            "Status": "1"
        },
        {
            "CTID": "6",
            "City": "Sangli",
            "Status": "1"
        },
        {
            "CTID": "7",
            "City": "Ichalkaranji",
            "Status": "1"
        },
        {
            "CTID": "8",
            "City": "Shirol",
            "Status": "1"
        }
    ],
    "status": 200,
    "message": "data found!"
}

我如何在列表视图生成器中使用这些数据， 我想在选择城市后显示城市列表 onpressed 我想将特定城市的 ID 保存在变量中，

Answer 1

首先创建一个类模型文件

city_model.dart

class City {
  final String ctid;
  final String name;
  final String status;

  City({required this.ctid, required this.name, required this.status});

  factory City.fromJson(Map<String, dynamic> json) {
    return City(
      ctid: json['CTID'] as String,
      name: json['City'] as String,
      status: json['Status'] as String,
    );
  }
}

用它来解码json数据并在listview.builder中实现

  Map<String, dynamic> map = json.decode(jsonData); //jsonData is your json response
        var cityList = (map['cities'] as List)
            .map((value) => City.fromJson(value))
            .toList(); 

    //And then add it to listview.builder

  ListView.builder(
        itemCount: cityList.length,
        itemBuilder: (context, index) {
          final city = cityList[index];
          
        return ListTile(
            title: Text(city.name),
            subtitle: Text('ID: ${city.ctid}, Status: ${city.status}'),
            onTap: () {
               // val = city.ctid; 
           },
           ),
        },
  );

Answer 2

首先，您应该将列表解析为列表变量，然后在 ListView 构建器中使用此变量。

你可以这样定义一个模型

class City {
  final String ctid;
  final String name;
  final String status;

  City({required this.ctid, required this.name, required this.status});

  factory City.fromJson(Map<String, dynamic> json) {
    return City(
      ctid: json['CTID'],
      name: json['City'],
      status: json['Status'],
    );
  }
}

并在您的小部件中使用它

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

class CityListPage extends StatefulWidget {
  @override
  _CityListPageState createState() => _CityListPageState();
}

class _CityListPageState extends State<CityListPage> {
  // define List var
  late List<City> cities;

  @override
  void initState() {
    super.initState();
    // call your API
    fetchData();
  }

  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('YOUR_API_ENDPOINT'));
    if (response.statusCode == 200) {
      // keep your response body in a variable 
      final parsed = jsonDecode(response.body);
      // use cities field from the response to parse data from the json
      List<dynamic> cityList = parsed['cities'];
      // use the model to map each City
      cities = cityList.map((json) => City.fromJson(json)).toList();
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('City List'),
      ),
      body: cities == null
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: cities.length,
              itemBuilder: (context, index) {
                final city = cities[index];
                return ListTile(
                  title: Text(city.name),
                  subtitle: Text('Status: ${city.status}'),
                );
              },
            ),
    );
  }
}