How to show data from 2nd JSON based on the same value of String

Question

I have 2 JSON file:

country.json

[
  {
    "countryName": "United States",
    "countryContinent": "North America"
  },
  {
    "countryName": "Germany",
    "countryContinent": "Europe"
  },
  {
    "countryName": "United Kingdom",
    "countryContinent": "Europe"
  }
]

continent.json

[
  {
    "continentName": "North America",
    "continentCountry": [
      "Canada",
      "Mexico",
      "Cuba"
    ],
    "continentArea": 24790000,
    "continentFlag": [
      "https://www.countryflags.io/ca/shiny/64.png",
      "https://www.countryflags.io/mx/shiny/64.png",
      "https://www.countryflags.io/cu/shiny/64.png"
    ]
  },
  {
    "continentName": "Europe",
    "continentCountry": [
      "Denmark",
      "Finland",
      "France"
    ],
    "continentArea": 10180000,
    "continentFlag": [
      "https://www.countryflags.io/dk/shiny/64.png",
      "https://www.countryflags.io/fi/shiny/64.png",
      "https://www.countryflags.io/fr/shiny/64.png"
    ]
  }
]

I want to build a list based on country.json, then for each value of countryContinent that == value of continentName => show data of value continentCountry from continent.json like this

So pls help me, this is main file:

import 'package:ask/model/continent_model.dart';
import 'package:ask/model/country_model.dart';
import 'package:ask/services/continent_services.dart';
import 'package:ask/services/country_service.dart';
import 'package:flutter/material.dart';

class Demo2 extends StatefulWidget {
  Demo2() : super();
  @override
  _Demo2State createState() => _Demo2State();
}

class _Demo2State extends State<Demo2> {
  List<Country> _country = [];
  List<Continent> _continent = [];

  @override
  void initState() {
    super.initState();
    CountryServices.getCountry().then((countries) {
      setState(() {
        _country = countries;
      });
    });
    ContinentServices.getContinent().then((continents) {
      setState(() {
        _continent = continents;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Demo 2')),
        body: Column(
          children: <Widget>[
            for (Country country in _country)
              Row(
                children: <Widget>[
                  Expanded(child: Text(country.countryName)),
                  Expanded(child: Text(country.countryContinent)),
                  Expanded(child: Text('')), // How to show data of continentCountry
                ],
              )
          ],
        ));
  }
}

---

EDIT 2:

To avoid creating another post, I extend the following question: in continent.json, there is more data about continentCountry ("Greenland"; "Panama"; "Jamaica") that matches the value of continentName ("North America") like this:

continent.json (edit 2)

[
  {
    "continentName": "North America",
    "continentArea": "Area1",
    "continentCountry": [
      "Canada",
      "Mexico",
      "Cuba"
    ],
    "continentFlag": [
      "https://www.countryflags.io/ca/shiny/64.png",
      "https://www.countryflags.io/mx/shiny/64.png",
      "https://www.countryflags.io/cu/shiny/64.png"
    ]
  },
  {
    "continentName": "North America",
    "continentArea": "Area2",
    "continentCountry": [
      "Greenland",
      "Panama",
      "Jamaica"
    ],
    "continentFlag": [
      "https://www.countryflags.io/gl/shiny/64.png",
      "https://www.countryflags.io/pa/shiny/64.png",
      "https://www.countryflags.io/jm/shiny/64.png"
    ]
  },
  {
    "continentName": "Europe",
    "continentArea": "Area3",
    "continentCountry": [
      "Denmark",
      "Finland",
      "France"
    ],
    "continentFlag": [
      "https://www.countryflags.io/dk/shiny/64.png",
      "https://www.countryflags.io/fi/shiny/64.png",
      "https://www.countryflags.io/fr/shiny/64.png"
    ]
  },
  {
    "continentName": "Asia",
    "continentArea": "Area4",
    "continentCountry": [
      "Japan"
    ],
    "continentFlag": [
      "https://www.countryflags.io/jp/shiny/64.png"
    ]
  }
]

so I want to display all of the continentCountry of "North America" as follows:

Pls help

Answer 1

you can loop over the list of strings List<String> in an seperate function like List<Text> getSameContinentCountries .

class for data representation

Country

class Country {
  String countryName;
  String countryContinent;

  Country({this.countryName, this.countryContinent});

  factory Country.fromJson(Map<String, dynamic> json) {
    return Country(
      countryName: json['countryName'],
      countryContinent: json['countryContinent'],
    );
  }
}

Continent

class Continent {
  String continentName;
  List<String> continentCountry;

  Continent({this.continentName, this.continentCountry});

  factory Continent.fromJson(Map<String, dynamic> json) {
    return Continent(
      continentName: json['continentName'],
      continentCountry: json['continentCountry'],
    );
  }
}

You can now generate the List<Country> _country and List<Continent> _continent in the initState with:

// TODO generate Lists
    for (Map<String, dynamic> _json in continentListResponse) {
      continent2 = Continent.fromJson(_json);
      this._continent.add(continent2);
    }
    for (Map<String, dynamic> _json in countryListResponse) {
      country2 = Country.fromJson(_json);
      this._country.add(country2);
    }

function for Countries in Continents

Text only

List<Text> getSameContinentCountries({@required String countryContinent}) {
    int continentIndex = this
        ._continent
        .indexWhere((continent) => continent.continentName == countryContinent);
    List<String> _cC = this._continent[continentIndex].continentCountry;
    List<Text> wrapText = [Text('no Countries found')];
    if (_cC.length > 0) {
      wrapText = [];
      for (String country in _cC) {
        wrapText.add(Text(country));
      }
    }
    return wrapText;
  }

all widgets

List<Widget> getSameContinentCountries({@required String countryContinent}) {
    // returns a List of any Widget, many combinations possible
    // such as chips, cards etc.
    int continentIndex = this
        ._continent
        .indexWhere((continent) => continent.continentName == countryContinent);
    List<String> _cC = this._continent[continentIndex].continentCountry;
    List<Widget> wrapText = [Text('no Countries found')];
    if (_cC.length > 0) {
      wrapText = [];
      for (String country in _cC) {
        // you may want to use Padding
        wrapText.add(Padding(
          padding: const EdgeInsets.symmetric(horizontal: 2),
          child: Text(country),
        ));
        // simple | divider with Text widget
        wrapText.add(Padding(
          padding: const EdgeInsets.symmetric(horizontal: 2),
          child: Text('|'),
        ));
        // or use the VerticalDivider which needs a parent with height
        wrapText.add(
          Container(
              height: 15,
              child: VerticalDivider(
                color: Colors.red,
                width: 4,
                thickness: 2,
              )),
        );
        // or use any other widget, eg. chips
        wrapText.add(Chip(
          label: Text(country),
        ));
      }
    }
    // remove the last "divider"
    wrapText.removeLast();
    return wrapText;
  }

use function generated widget

Here I would suggest you to use the Wrap Widget.

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Demo 2')),
        body: Column(
          children: <Widget>[
            for (Country country in _country)
              Row(
                children: <Widget>[
                  Expanded(child: Text(country.countryName)),
                  Expanded(child: Text(country.countryContinent)),
                  Expanded(
                    child: Wrap(
                        children: getSameContinentCountries(
                            countryContinent: country.countryContinent)),
                  ),
                ],
              )
          ],
        ));
  }

Link to the result Image

UPDATE

I can't comment on another answer yet, so I have to include this short info in my answer.

To use the images, just return an Image widget, you may want to wrap it in a Sized Box or an Button / GestureDetctor for click events.

List<Widget> getFlags({@required String countryContinent}) {
    // returns a List of any Widget, many combinations possible
    // such as chips, cards, images, buttons etc.
    int continentIndex = this
        ._continent
        .indexWhere((continent) => continent.continentName == countryContinent);
    List<String> _cF = this._continent[continentIndex].continentFlag;
    List<Widget> wrapWidget = [Text('no Countries found')];
    if (_cF.length > 0) {
      wrapWidget = [];
      for (String flag in _cF) {
        // add the Flags
        wrapWidget.add(Image.network(flag));
      }
    }
    return wrapWidget;
  }

Result:

UPDATE 2

To have access to all flags with the same continentName , you have to extract the matching elemtens and then loop over the new List<Continent> . Change the code of the getFlags function like so:

List<Widget> getFlags({@required String countryContinent}) {
  // returns a List of any Widget, many combinations possible
  // such as chips, cards, images, buttons etc.
  //! UPDATE
  List<Continent> sameContient = this
      ._continent
      .where((continent) => continent.continentName == countryContinent)
      .toList();
  List<String> _cF = [];
  for (Continent sc in sameContient) {
    for (String flag in sc.continentFlag) {
      _cF.add(flag);
    }
  }
  List<Widget> wrapWidget = [Text('no Countries found')];
  if (_cF.length > 0) {
    wrapWidget = [];
    for (String flag in _cF) {
      // add the Flags
      wrapWidget.add(
          Image.network(flag, height: 16, width: 25, fit: BoxFit.contain));
    }
  }
  return wrapWidget;
}

and you will get the following result:

Answer 2

Expanded(
   child: MyCountries(
     continent: List<Continent>.from(_continent)..retainWhere((continent) => 
       continent.continentName == country.countryContinent)
),

I create a widget MyCountries that receives a List, first I create a copy of that list (List.from) to avoid changing the original list _continent. RetainWhere keeps only the elements that sastisfy the condition. You wanted to keep only the continent where countryContinent == continentName

continent.continentName == country.countryContinent

and in the Mycountries widget

class MyCountries extends StatelessWidget{
  final String countries;


  MyCountries({List<Continent> continent}) :
    this.countries = continent.reduce((prev, curr) => 
     prev..continentCountry.addAll(curr.continentCountry)).continentCountry.join(' | ');

  @override
  Widget build(BuildContext context) {
    return Text(countries);
  }
}

it gets the continent List and reduce it to a single continent object with a continentCountry List with all the countries, then just apply continentCountry.join(' | ') to join all the Strings of that list and create your countries String that you will use in the Text widget

UPDATE

From what I understand of your comments there should only be one ocurrence countryContinent that == value of continentName, I thought there could be more (my bad), so maybe you should change it like this

Expanded(
 child: MyArea(
 continent: _continent.firstWhere((continent) =>  continent.continentName == country.countryContinent)
 //This should return the first ocurrence, only one continent object
),

class MyArea extends StatelessWidget{
  final String area;

  MyArea({Continent continent}) :
    this.area = continent.continentArea.toString(); //You need to give a string to the Text widget anyway

  @override
  Widget build(BuildContext context) {
    return Text(area);
  }
}

I suppose List is a list of urls of the flags

Expanded(
 child: MyFlags(
 continent: _continent.firstWhere((continent) =>  continent.continentName == country.countryContinent)
 //This should return the first ocurrence, only one continent object
),

class MyFlags extends StatelessWidget{
  final List<String> flags;

  MyFlags ({Continent continent}) :
    this.flags= continent.continentFlag;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly, //or try other alignments or using Spacer() between widget in children
      children: [
        for(String flag in flags)
         Image.network(flag, height: 16, width: 25, fit: BoxFit.contain)
         //A flag is wider thatn taller, but you could try other sizes if you want 
      ]
    );
  }
}

UPDATE 2

Expanded(
 child: MyFlags(
 continent: List<Continent>.from(_continent)..retainWhere((continent) => 
       continent.continentName == country.countryContinent)
),

class MyFlags extends StatelessWidget{
  final List<String> flags;
  final List<String> countries;

  MyFlags ({List<Continent> continent}) :
    this.flags = continents.expand<String>((continent) => continent.continentFlag).toList(),
    this.countries = continents.expand<String>((continent) => continent.continentCountry).toList(),
    assert(flags.length == countries.length); //They should have the same length

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly, //or try other alignments or using Spacer() between widget in children
      children: [
        for(int i = 0; i < flags.length; i++)
         Column(
           children: [
             Image.network(flags[i], height: 16, width: 25, fit: BoxFit.contain),
             Text(countries[i])
           ]
         )
      ]
    );
  }
}

UPDATE 3

Expanded(
 child: MyFlags(
 continent: List<Continent>.from(_continent)..retainWhere((continent) => 
       continent.continentName == country.countryContinent)
),

class MyFlags extends StatelessWidget{
  final List<Continent> continent;

  MyFlags({this.continent});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for(int i = 0; i < continent.length; i++)
          Row(
            children: [
              Text(continent[i].continentArea.toString()), // or 'Area ${i+1}' if you want to show Area 1, Area 2, etc
              for(String flag in continent[i].continentFlag)
                Image.network(flags[i], height: 16, width: 25, fit: BoxFit.contain),
            ]
          )
      ]
    );
  }
}