Obtenez tous les pays optimises pour les listes deroulantes et les formulaires

L'endpoint /v1/select/countries retourne une liste legere de tous les pays avec uniquement les champs id et name, optimisee pour les menus deroulants et les champs de formulaire.

Endpoint

GET https://api.countrydataapi.com/v1/select/countries

Authentification

Incluez votre cle API comme parametre de requete :

?apikey=votre-cle-api

Votre cle API est comme un mot de passe, gardez-la securisee. Obtenez votre cle depuis le tableau de bord de votre compte.

Parametres de Requete

Parametre	Type	Requis	Description
`apikey`	string	Oui	Votre cle d'authentification API
`lang`	string	Non	Code de langue pour les noms de pays (defaut : `en`)

Langues Supportees

en - Anglais (defaut)
es - Espagnol
pt - Portugais
fr - Francais
de - Allemand
it - Italien

Exemple de Requete

curl "https://api.countrydataapi.com/v1/select/countries?apikey=votre-cle-api&lang=fr"

JavaScript (Fetch)

const API_KEY = 'votre-cle-api';

async function chargerPays() {
  const response = await fetch(
    `https://api.countrydataapi.com/v1/select/countries?apikey=${API_KEY}&lang=fr`
  );
  const data = await response.json();
  return data;
}

JavaScript (Axios)

import axios from 'axios';

const response = await axios.get(
  'https://api.countrydataapi.com/v1/select/countries',
  {
    params: {
      apikey: 'votre-cle-api',
      lang: 'fr',
    },
  }
);

Python

import requests

response = requests.get(
    'https://api.countrydataapi.com/v1/select/countries',
    params={
        'apikey': 'votre-cle-api',
        'lang': 'fr'
    }
)
data = response.json()

PHP

<?php
$apiKey = 'votre-cle-api';
$url = "https://api.countrydataapi.com/v1/select/countries?apikey={$apiKey}&lang=fr";

$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);

$data = json_decode($response, true);
?>

Angular

// country.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

interface Country {
  id: string;
  name: string;
}

interface ApiResponse {
  success: boolean;
  data: Country[];
}

@Injectable({
  providedIn: 'root'
})
export class CountryService {
  private readonly API_KEY = 'votre-cle-api';
  private readonly BASE_URL = 'https://api.countrydataapi.com/v1';

  constructor(private http: HttpClient) {}

  getCountries(lang: string = 'fr'): Observable<Country[]> {
    const params = new HttpParams()
      .set('apikey', this.API_KEY)
      .set('lang', lang);

    return this.http.get<ApiResponse>(
      `${this.BASE_URL}/select/countries`,
      { params }
    ).pipe(
      map(response => response.data)
    );
  }
}

// country-select.component.ts
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { CountryService } from './country.service';

@Component({
  selector: 'app-country-select',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div *ngIf="loading">Chargement des pays...</div>
    <div *ngIf="error" class="error">{{ error }}</div>
    <select
      *ngIf="!loading && !error"
      [(ngModel)]="selectedCountry"
      (ngModelChange)="onCountryChange($event)"
    >
      <option value="">Selectionnez un pays...</option>
      <option *ngFor="let country of countries" [value]="country.id">
        {{ country.name }}
      </option>
    </select>
  `
})
export class CountrySelectComponent implements OnInit {
  countries: any[] = [];
  selectedCountry = '';
  loading = true;
  error: string | null = null;

  constructor(private countryService: CountryService) {}

  ngOnInit() {
    this.countryService.getCountries('fr').subscribe({
      next: (data) => {
        this.countries = data;
        this.loading = false;
      },
      error: (err) => {
        this.error = 'Echec du chargement des pays';
        this.loading = false;
      }
    });
  }

  onCountryChange(countryId: string) {
    console.log('Pays selectionne:', countryId);
    // Charger les regions, emettre un evenement, etc.
  }
}

Format de Reponse

Reponse de Succes

{
  "success": true,
  "data": [
    {
      "id": "66c7a6c9e4bda21f4ab10ef2",
      "name": "Afghanistan"
    },
    {
      "id": "66c7a6c9e4bda21f4ab10ef3",
      "name": "Albanie"
    },
    {
      "id": "66c7a6c9e4bda21f4ab10ef4",
      "name": "Algerie"
    }
    // ... plus de pays (200+ au total)
  ]
}

Champs de Reponse

Champ	Type	Description
`success`	boolean	Indique si la requete a reussi
`data`	array	Tableau d'objets pays
`data[].id`	string	Identifiant unique du pays (MongoDB ObjectId)
`data[].name`	string	Nom du pays dans la langue demandee

Reponse d'Erreur

{
  "success": false,
  "error": {
    "code": "INVALID_API_KEY",
    "message": "La cle API fournie est invalide"
  }
}

Consultez la documentation des Codes d'Erreur pour tous les codes d'erreur possibles.

Taille de Reponse

L'endpoint select est optimise pour une bande passante minimale :

Endpoint complet (/v1/countries/all) : ~500KB (inclut toutes les donnees du pays)
Endpoint select (/v1/select/countries) : ~15KB (uniquement id et name)

Cela rend l'endpoint select 97% plus petit et parfait pour les dropdowns de formulaires !

Utilisation des Tokens

Cet endpoint consomme 1 token par requete.

Astuce : Mettez la reponse en cache dans localStorage ou dans l'etat de votre application. Les pays changent rarement, vous pouvez donc mettre en cache en toute securite pendant 7+ jours.

Cas d'Utilisation

1. Menu Deroulant

<select id="country">
  <option value="">Selectionnez un pays...</option>
  <!-- Rempli via JavaScript -->
</select>

<script>
async function remplirPays() {
  const response = await fetch(
    'https://api.countrydataapi.com/v1/select/countries?apikey=votre-cle-api&lang=fr'
  );
  const { data } = await response.json();

  const select = document.getElementById('country');
  data.forEach(country => {
    const option = new Option(country.name, country.id);
    select.add(option);
  });
}

remplirPays();
</script>

2. Composant React

import { useState, useEffect } from 'react';

function CountrySelect() {
  const [countries, setCountries] = useState([]);

  useEffect(() => {
    fetch('https://api.countrydataapi.com/v1/select/countries?apikey=votre-cle-api&lang=fr')
      .then(res => res.json())
      .then(({ data }) => setCountries(data));
  }, []);

  return (
    <select>
      <option value="">Selectionnez un pays...</option>
      {countries.map(country => (
        <option key={country.id} value={country.id}>
          {country.name}
        </option>
      ))}
    </select>
  );
}

3. Composant Vue

<script setup>
import { ref, onMounted } from 'vue';

const countries = ref([]);

onMounted(async () => {
  const response = await fetch(
    'https://api.countrydataapi.com/v1/select/countries?apikey=votre-cle-api&lang=fr'
  );
  const { data } = await response.json();
  countries.value = data;
});
</script>

<template>
  <select>
    <option value="">Selectionnez un pays...</option>
    <option v-for="country in countries" :key="country.id" :value="country.id">
      {{ country.name }}
    </option>
  </select>
</template>

Exemple de Cache

Mettez les pays en cache dans localStorage pour minimiser les appels API :

const CACHE_KEY = 'countries_cache';
const CACHE_DURATION = 7 * 24 * 60 * 60 * 1000; // 7 jours

async function getPays() {
  // Verifier le cache d'abord
  const cached = localStorage.getItem(CACHE_KEY);
  if (cached) {
    const { data, timestamp } = JSON.parse(cached);
    if (Date.now() - timestamp < CACHE_DURATION) {
      return data;
    }
  }

  // Recuperer depuis l'API
  const response = await fetch(
    'https://api.countrydataapi.com/v1/select/countries?apikey=votre-cle-api&lang=fr'
  );
  const { data } = await response.json();

  // Sauvegarder en cache
  localStorage.setItem(CACHE_KEY, JSON.stringify({
    data,
    timestamp: Date.now()
  }));

  return data;
}

Exemple Multilingue

Basculez entre les langues dynamiquement :

function chargerPays(langue = 'fr') {
  return fetch(
    `https://api.countrydataapi.com/v1/select/countries?apikey=votre-cle-api&lang=${langue}`
  ).then(res => res.json());
}

// Charger en espagnol
const paysEspagnol = await chargerPays('es');

// Charger en allemand
const paysAllemand = await chargerPays('de');

Conseils de Performance

Cache agressif : Les pays ne changent pas souvent
Utilisez le chargement lazy : Chargez les pays quand le dropdown recoit le focus
Implementez la recherche : Pour une meilleure UX avec 200+ pays
Prechargez au chargement de la page : Recuperez en arriere-plan pendant que l'utilisateur lit le contenu

Limites de Taux

Forfait gratuit : 100 requetes/jour
Forfait Basic : 1 000 requetes/jour
Forfait Pro : 10 000 requetes/jour
Forfait Enterprise : Illimite

Consultez notre page de tarifs pour plus de details.

Endpoints Associes

GET /v1/select/states - Obtenir les regions par pays
GET /v1/select/cities - Obtenir les villes par region
GET /v1/countries/all - Obtenir les donnees completes des pays

Guides d'Integration Complets

Formulaire d'Adresse avec Selects en Cascade - JavaScript Vanilla
Integration React - Hooks personnalises
Integration Vue - Composables

Besoin d'Aide ?

Consultez notre documentation des Codes d'Erreur
Voir le guide d'Authentification
Contactez le support via le tableau de bord de votre compte

Note : Le champ id retourne est un MongoDB ObjectId qui identifie uniquement chaque pays a travers tous les endpoints. Utilisez cet ID lors de la requete des regions, villes ou autres donnees associees.

Documentation

Select Countries