Flutter:如何基于数组的相同值显示来自2个JSON的数据 [英] Flutter: How to display data from 2 JSON based on the same value of Array

问题描述

我有2个JSON文件:

I have 2 JSON file:

json1:字符串人物名称(

json1: String people name (API)

[
  {
    "name": "Oliver"
  },
  {
    "name": "George"
  },
  {
    "name": "Harry"
  }
]

json2:字符串服装和一系列适合该服装的人(

json2: String outfit and an array of people who fit that outfit (API)

[
  {
    "outfit": "T-shirt",
    "fit": [
      "Oliver",
      "George"
    ]
  },
  {
    "outfit": "Hat",
    "fit": [
      "George",
      "Harry"
    ]
  },
  {
    "outfit": "Jacket",
    "fit": [
      "Harry"
    ]
  }
]

我希望在单击此人的名字时=>显示适合他们的服装

I want that when clicking on the name of the person => show outfits that fit them

Ex.乔治穿着T恤和帽子

所以请帮助我，这是主文件:

So pls help me, this is the main file:

import 'package:ask/model/page1_model.dart';
import 'package:ask/model/page2_model.dart';
import 'package:ask/services/json2_service.dart';
import 'package:ask/services/json1_service.dart';
import 'package:flutter/material.dart';

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  List<Json1> _json1 = [];
  List<Json2> _json2 = [];

  @override
  void initState() {
    super.initState();
    Json1Services.getData().then((data) {
      setState(() {
        _json1 = data;
      });
    });
    Json2Services.getData().then((data) {
      setState(() {
        _json2 = data;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('List Name')),
        body: ListView.builder(
          itemCount: _json1.length,
          itemBuilder: (BuildContext context, int index) {
            Json1 json1 = _json1[index];
            return Column(children: [
              InkWell(
                  child: Text(json1.name),
                  onTap: () => Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => Scaffold(
                                appBar: AppBar(title: Text('${json1.name} fits:')),
                                body: ShowWhatFit(json2: List<Json2>.from(_json2)..retainWhere((element) => element.fit[index] == json1.name)), // I think this line is not right
                              ))))
            ]);
          },
        ));
  }
}

class ShowWhatFit extends StatelessWidget {
  final List<Json2> json2;
  ShowWhatFit({this.json2});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        for (int i = 0; i < json2.length; i++) Text(json2[i].outfit),
      ],
    );
  }
}

............................................... ...............................

..............................................................................

推荐答案

List<Json2>.from(_json2)..retainWhere((element) => element.fit[index] == json1.name))

retainWhere将检查每个元素，并仅保留条件为真的那些元素.问题是element.fit[index] == json1.name只需检查列表fit的索引index处的元素并将其与名称json1.name进行比较，并不会真正检查名称是否在列表fit中.试试:

retainWhere will check every element and keep only those where the condition is true. the problem is element.fit[index] == json1.name just check the element at index index of the list fit and compares it with the name json1.name, doesn't really check if the name is in the list fit. Try:

List<Json2>.from(_json2)..retainWhere((element) => element.fit.contains(json1.name)))

这将迭代json2中的所有元素，然后检查列表fit是否包含相等的对象json1.name，如果存在则返回true，否则返回false

That will iterate every elemnt in json2, then check if the list fit contains an equal object json1.name and returns true if there is one, otherwise false

这篇关于Flutter:如何基于数组的相同值显示来自2个JSON的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！