List of ISO country codes

[jfbrennan]

I'm looking to avoid maintaining a list of country codes in my app. I would expect JavaScript runtimes to provide this data.

This is precisely what I wish Intl would add to the current supportedValuesOf method:

Intl.supportedValuesOf('region') // "region" key is used in other APIs to mean ISO 3166, i.e. the country codes

Many Intl APIs apparently have mappings for country codes, so perhaps this internal list of codes can be given a public interface (and my apologies if I didn't google hard enough...I spent a lot of time searching around and reading MDN and SO and the tc39 backlogs and didn't find answers).

Why this is needful:

• It's standardized data used by many computer systems
• Existing APIs don't seem to offer any way of getting at this information today
• A list of country codes is a very common need for developers building support for an international user base
• Developers have to find a reliable source for this data, bring it into their codebase, and maintain it (or add a 3rd-party dependency that does it for them)
• Many UI features depend on this info, being able to loop the country codes directly from an Intl API into a corresponding Intl API would be quite convenient:
  • select or menu element with a list of countries (e.g. shipping address form)
  • custom phone number input with list of country prefix numbers (e.g. contacts card phone input)
  • table of countries and their currency (e.g. financial tools)

An example:

// List of options for a country select
const names = new Intl.DisplayNames(['en'], {type: 'region'});
const options = Intl.supportedValuesOf('region').map(code => `<option value="${code}">${names.of(code)}</option>`);

[sffc]

Hi, @jfbrennan!

Some initial feedback on your proposal:

• Defining a list of country codes is not completely trivial. Do we include metaregions like 001 (World) or EU (European Union)? How about subdivisions like GBENG (England)? How about geopolitically disputed regions like XK (Kosovo) or PS (Palestine)?
• Not all browsers ship data for all regions. For example, OEMs, especially on mobile, might ship only those regions where they sell devices.
• Questions about your use cases:

select or menu element with a list of countries (e.g. shipping address form)

Probably you can't simply ship to all countries. You probably want to get the list of supported regions from your fulfillment partner.

custom phone number input with list of country prefix numbers (e.g. contacts card phone input)

Seems like this would want to be paired with an additional phone number formatting API.

table of countries and their currency (e.g. financial tools)

The list of countries should probably come from your payment partner, yes?

[jfbrennan]

Defining a list of country codes is not completely trivial.

I understand i18n stuff is tough and standards aren't always 100% reliable, but there is a standard and it should be followed: https://www.iso.org/iso-3166-country-codes.html. All questions about what is included are answered by the standard - the list you get from JavaScript is the list that ISO 3166 defines. So maybe Intl.supportedValuesOf('region') isn't precisely what should be done, perhaps Intl.supportedValuesOf('countrycode').

Not all browsers ship data for all regions.

Yeah, browsers differ. Hasn't stopped the web in the past, shouldn't be a reason to not progress going forward. Define the spec, the rest is left up to implementers 🤞

Questions about your use cases

Let's avoid nitpicking the UX examples - they're just examples.