通过国家名称查询世界银行API的国家信息-js教程-PHP中文网

通过国家名称查询世界银行API的国家信息

聖光之護

发布： 2025-08-13 22:04:13

原创

345人浏览过

通过国家名称查询世界银行api的国家信息

本文旨在解决在使用世界银行API时，如何通过国家名称而非ISO2代码查询并显示国家信息的问题。我们将探讨如何利用API的特性，以及如何在Angular应用中实现这一功能，以便用户可以通过输入国家名称来获取相应的国家属性，例如首都、地区、收入水平、经纬度等。

理解问题

世界银行API主要通过ISO2国家代码（例如，US代表美国）来检索国家信息。直接使用国家名称进行查询通常不会返回预期的结果。因此，我们需要找到一种方法，将用户输入的国家名称转换为对应的ISO2代码，然后再使用该代码调用API。

解决方案概述

获取国家名称与ISO2代码的映射关系： 从世界银行API或其他可靠来源获取所有国家名称及其对应的ISO2代码的列表。
实现名称查找功能： 在Angular应用中，创建一个函数，该函数接收用户输入的国家名称，并在第一步获取的列表中查找匹配的ISO2代码。
调用API并显示结果： 使用找到的ISO2代码调用世界银行API，获取国家属性，并在用户界面上显示这些属性。

详细步骤

1. 获取国家名称与ISO2代码的映射关系

虽然世界银行API本身可能没有直接通过名称查询ISO2代码的功能，但它提供了获取所有国家信息的接口，我们可以从中提取所需的信息。

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class WorldbankService {
  private apiUrl = 'http://api.worldbank.org/v2/country?format=json';

  constructor(private http: HttpClient) { }

  getAllCountries(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl).pipe(
      map((data: any) => data[1]) // 提取国家数据
    );
  }
}

登录后复制

此服务中的getAllCountries方法会返回一个包含所有国家信息的数组。每个国家对象都包含name（国家名称）和id（ISO2代码）属性。

2. 实现名称查找功能

在组件中，我们可以使用这个服务来获取国家列表，并创建一个函数来查找ISO2代码。

import { Component, OnInit } from '@angular/core';
import { WorldbankService } from '../worldbank.service';

@Component({
  selector: 'app-country-info',
  templateUrl: './country-info.component.html',
  styleUrls: ['./country-info.component.css']
})
export class CountryInfoComponent implements OnInit {
  countryName = "";
  countryProperties: any = null;
  countries: any[] = [];

  constructor(private worldbankService: WorldbankService) {}

  ngOnInit(): void {
    this.worldbankService.getAllCountries().subscribe(countries => {
      this.countries = countries;
    });
  }

  getCountryProperties() {
    const iso2Code = this.findIso2Code(this.countryName);
    if (iso2Code) {
      this.worldbankService.getCountryProperties(iso2Code).subscribe(
        (data: any) => {
          this.countryProperties = data[1][0];
        }
      );
    } else {
      this.countryProperties = null;
      alert('Country not found.');
    }
  }

  findIso2Code(countryName: string): string | undefined {
    const country = this.countries.find(c => c.name.toLowerCase() === countryName.toLowerCase());
    return country ? country.id : undefined;
  }

  getCountryPropertiesByIso2Code(iso2Code: string) {
    this.worldbankService.getCountryProperties(iso2Code).subscribe(
      (data: any) => {
        this.countryProperties = data[1][0];
      }
    );
  }
}

登录后复制

findIso2Code 函数接收用户输入的国家名称，并在 countries 数组中查找匹配的ISO2代码。注意，这里使用了 toLowerCase() 方法进行不区分大小写的比较。

NameGPT名称生成器

免费AI公司名称生成器，AI在线生成企业名称，注册公司名称起名大全。

查看详情

修改 WorldbankService 使得它可以通过ISO2代码获取国家信息：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WorldbankService {
  private apiUrl = 'http://api.worldbank.org/v2/country';

  constructor(private http: HttpClient) { }

  getCountryProperties(countryCode: string): Observable<any> {
    const url = `${this.apiUrl}/${countryCode}?format=json`;
    return this.http.get(url);
  }
}

登录后复制

3. 调用API并显示结果

现在，getCountryProperties 函数首先查找ISO2代码，然后使用该代码调用API。

country-info.component.html:

<div class="right-column">
    <input type="text" [(ngModel)]="countryName" placeholder="Enter a country name" />
    <button (click)="getCountryProperties()">Enter</button>

    <ul class="properties-list" *ngIf="countryProperties">
        <li>Name: {{ countryProperties.name }}</li>
        <li>Capital: {{ countryProperties.capitalCity }}</li>
        <li>Region: {{ countryProperties.region.value }}</li>
        <li>Income Level: {{ countryProperties.incomeLevel.value }}</li>
        <li>Latitude: {{ countryProperties.latitude }}</li>
        <li>Longitude: {{ countryProperties.longitude }}</li>
    </ul>
</div>

登录后复制