Alle Laender optimiert fuer Select-Dropdowns und Formulare abrufen

Der Endpunkt /v1/select/countries gibt eine leichtgewichtige Liste aller Laender mit nur den Feldern id und name zurueck, optimiert fuer Dropdown-Menues und Formulareingaben.

Endpunkt

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

Authentifizierung

Fuegen Sie Ihren API-Schluessel als Query-Parameter hinzu:

?apikey=ihr-api-schluessel

Ihr API-Schluessel ist wie ein Passwort, halten Sie ihn sicher. Holen Sie sich Ihren Schluessel vom Konto-Dashboard.

Query-Parameter

Parameter	Typ	Erforderlich	Beschreibung
`apikey`	string	Ja	Ihr API-Authentifizierungsschluessel
`lang`	string	Nein	Sprachcode fuer Laendernamen (Standard: `en`)

Unterstuetzte Sprachen

en - Englisch (Standard)
es - Spanisch
pt - Portugiesisch
fr - Franzoesisch
de - Deutsch
it - Italienisch

Anfrage-Beispiel

curl "https://api.countrydataapi.com/v1/select/countries?apikey=ihr-api-schluessel&lang=de"

JavaScript (Fetch)

const API_KEY = 'ihr-api-schluessel';

async function laenderLaden() {
  const response = await fetch(
    `https://api.countrydataapi.com/v1/select/countries?apikey=${API_KEY}&lang=de`
  );
  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: 'ihr-api-schluessel',
      lang: 'de',
    },
  }
);

Python

import requests

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

PHP

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

$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 = 'ihr-api-schluessel';
  private readonly BASE_URL = 'https://api.countrydataapi.com/v1';

  constructor(private http: HttpClient) {}

  getCountries(lang: string = 'de'): 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">Laender werden geladen...</div>
    <div *ngIf="error" class="error">{{ error }}</div>
    <select
      *ngIf="!loading && !error"
      [(ngModel)]="selectedCountry"
      (ngModelChange)="onCountryChange($event)"
    >
      <option value="">Land auswaehlen...</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('de').subscribe({
      next: (data) => {
        this.countries = data;
        this.loading = false;
      },
      error: (err) => {
        this.error = 'Fehler beim Laden der Laender';
        this.loading = false;
      }
    });
  }

  onCountryChange(countryId: string) {
    console.log('Ausgewaehltes Land:', countryId);
    // Bundeslaender laden, Event emittieren, etc.
  }
}

Antwort-Format

Erfolgreiche Antwort

{
  "success": true,
  "data": [
    {
      "id": "66c7a6c9e4bda21f4ab10ef2",
      "name": "Afghanistan"
    },
    {
      "id": "66c7a6c9e4bda21f4ab10ef3",
      "name": "Albanien"
    },
    {
      "id": "66c7a6c9e4bda21f4ab10ef4",
      "name": "Algerien"
    }
    // ... weitere Laender (200+ insgesamt)
  ]
}

Antwort-Felder

Feld	Typ	Beschreibung
`success`	boolean	Zeigt an, ob die Anfrage erfolgreich war
`data`	array	Array von Laender-Objekten
`data[].id`	string	Eindeutige Laenderkennung (MongoDB ObjectId)
`data[].name`	string	Laendername in der angeforderten Sprache

Fehler-Antwort

{
  "success": false,
  "error": {
    "code": "INVALID_API_KEY",
    "message": "Der bereitgestellte API-Schluessel ist ungueltig"
  }
}

Siehe die Fehlercode-Dokumentation fuer alle moeglichen Fehlercodes.

Antwort-Groesse

Der Select-Endpunkt ist fuer minimale Bandbreite optimiert:

Vollstaendiger Endpunkt (/v1/countries/all): ~500KB (enthaelt alle Laenderdaten)
Select-Endpunkt (/v1/select/countries): ~15KB (nur id und name)

Das macht den Select-Endpunkt 97% kleiner und perfekt fuer Formular-Dropdowns!

Token-Verbrauch

Dieser Endpunkt verbraucht 1 Token pro Anfrage.

Tipp: Speichern Sie die Antwort im localStorage oder im Zustand Ihrer Anwendung zwischen. Laender aendern sich selten, daher koennen Sie sicher fuer 7+ Tage cachen.

Anwendungsfaelle

1. Dropdown-Menue

<select id="country">
  <option value="">Land auswaehlen...</option>
  <!-- Via JavaScript befuellt -->
</select>

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

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

laenderBefuellen();
</script>

2. React-Komponente

import { useState, useEffect } from 'react';

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

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

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

3. Vue-Komponente

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

const countries = ref([]);

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

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

Caching-Beispiel

Speichern Sie Laender im localStorage zwischen, um API-Aufrufe zu minimieren:

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

async function getLaender() {
  // Zuerst Cache pruefen
  const cached = localStorage.getItem(CACHE_KEY);
  if (cached) {
    const { data, timestamp } = JSON.parse(cached);
    if (Date.now() - timestamp < CACHE_DURATION) {
      return data;
    }
  }

  // Von API abrufen
  const response = await fetch(
    'https://api.countrydataapi.com/v1/select/countries?apikey=ihr-api-schluessel&lang=de'
  );
  const { data } = await response.json();

  // Im Cache speichern
  localStorage.setItem(CACHE_KEY, JSON.stringify({
    data,
    timestamp: Date.now()
  }));

  return data;
}

Mehrsprachiges Beispiel

Dynamisch zwischen Sprachen wechseln:

function laenderLaden(sprache = 'de') {
  return fetch(
    `https://api.countrydataapi.com/v1/select/countries?apikey=ihr-api-schluessel&lang=${sprache}`
  ).then(res => res.json());
}

// Auf Spanisch laden
const laenderSpanisch = await laenderLaden('es');

// Auf Franzoesisch laden
const laenderFranzoesisch = await laenderLaden('fr');

Performance-Tipps

Aggressiv cachen: Laender aendern sich nicht oft
Lazy Loading verwenden: Laender laden, wenn das Dropdown fokussiert wird
Suche implementieren: Fuer bessere UX mit 200+ Laendern
Beim Seitenladen vorladen: Im Hintergrund abrufen, waehrend der Benutzer den Inhalt liest

Rate Limits

Kostenloser Plan: 100 Anfragen/Tag
Basic Plan: 1.000 Anfragen/Tag
Pro Plan: 10.000 Anfragen/Tag
Enterprise Plan: Unbegrenzt

Besuchen Sie unsere Preisseite fuer weitere Details.

Vollstaendige Integrations-Anleitungen

Adressformular mit Kaskadierenden Selects - Vanilla JavaScript
React-Integration - Benutzerdefinierte Hooks
Vue-Integration - Composables

Brauchen Sie Hilfe?

Konsultieren Sie unsere Fehlercode-Dokumentation
Siehe Authentifizierungsanleitung
Kontaktieren Sie den Support ueber Ihr Konto-Dashboard

Hinweis: Das zurueckgegebene id-Feld ist eine MongoDB ObjectId, die jedes Land eindeutig ueber alle Endpunkte hinweg identifiziert. Verwenden Sie diese ID bei der Abfrage von Bundeslaendern, Staedten oder anderen zugehoerigen Daten.

Dokumentation

Select Countries