Flutter: How to display data from 2 JSON based on the same value of Array

Question

I have 2 JSON file:

json1: String people name ( API )

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

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. George fits a T-shirt and a hat

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),
      ],
    );
  }
}

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

Answer 1

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

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)))

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