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