json - 在Flutter的ListView中加载具有特定类别的JSON数据

Question

我有两个公司的产品JSONt列表Apple和Windows。以下是我的JSON数据结构:

[
  {
    "category": "Apple",
    "name": "Macbook Air"
  },
  {
    "category": "Apple",
    "name": "Macbook Pro"
  },
  {
    "category": "Microsoft",
    "name": "Surface"
  },
  {
    "category": "Apple",
    "name": "iPad"
  },
  {
    "category": "Microsoft",
    "name": "Windows"
  },
  {
    "category": "Apple",
    "name": "Siri"
  },
  {
    "category": "Microsoft",
    "name": "Office"
  }
]

我正在尝试创建 Apple或 Microsoft类别的列表 View 。但是在我当前的列表 View 中，它显示了JSON文件中的所有产品:

  List data;

  Future<String> loadJsonData() async{
    var jsonText = await rootBundle.loadString('assets/json/products.json');
    setState(() => data = json.decode(jsonText));
  }

  @override
  void initState() {
    this.loadJsonData();
    super.initState();
  }

上面的代码加载了两家公司的所有产品。但是，如何仅加载 Apple或 Microsoft的产品？

这是我的 ListView

Container(
    child: data == null ? Container() : ListView.builder(
        itemCount: data.length,
        itemBuilder: (BuildContext context, int index) {
            return Container(
                child: ListTile(
                    title: Text(
                        data[index]['name'],
                    ),
                ),
            );
        }
    ),
),

Answer 1

您可以执行以下操作:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xfff5f5f5),
        appBar: AppBar(
          title: Text('Demo'),
        ),
        body: Container(
          child: data == null
              ? Container()
              : ListView.builder(
                  itemCount: data.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                        child: ((data[index]['category'] == "Apple")
                            ? ListTile(title: Text(data[index]['name']))
                            : Container()));
                  }),
        ));
  }
}