如何通过国家名称而非 ISO2 代码显示世界银行 API 信息-js教程-PHP中文网

如何通过国家名称而非 ISO2 代码显示世界银行 API 信息

碧海醫心

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

原创

731人浏览过

如何通过国家名称而非 iso2 代码显示世界银行 api 信息

本文旨在指导开发者如何使用世界银行 API，通过国家名称检索并显示国家信息，例如名称、首都、地区、收入水平、经度和纬度等。由于世界银行 API 主要通过 ISO2 代码进行查询，本文将介绍如何结合使用 API 和数据处理技术，实现通过国家名称进行查询的功能，并提供 Angular 示例代码。

世界银行 API 提供了丰富的国家数据，但通常使用 ISO2 代码作为主要查询参数。如果需要通过国家名称进行查询，一种常见的方法是先获取所有国家的信息，然后在客户端进行过滤。以下是一种实现方案：

1. 获取所有国家信息

首先，我们需要从世界银行 API 获取所有国家的信息。可以使用以下 API 端点：

http://api.worldbank.org/v2/country?format=json&per_page=300

登录后复制

注意：per_page=300 参数用于指定每页返回的国家数量，确保一次性获取所有国家信息。如果国家数量超过 300，可能需要进行分页处理。

2. 创建国家名称到 ISO2 代码的映射

获取所有国家信息后，我们需要创建一个国家名称到 ISO2 代码的映射。这可以通过遍历 API 返回的数据来实现。

NameGPT名称生成器

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

查看详情

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

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

  constructor(private http: HttpClient) { }

  // 获取所有国家信息并创建映射
  getAllCountries(): Observable<any> {
    const url = `${this.apiUrl}?format=json&per_page=300`;
    return this.http.get(url).pipe(
      map((data: any) => {
        const countries = data[1];
        countries.forEach((country: any) => {
          this.countryCodeMap[country.name.toLowerCase()] = country.iso2Code;
        });
        return this.countryCodeMap;
      })
    );
  }

  // 根据国家名称获取 ISO2 代码
  getCountryCodeByName(countryName: string): string | undefined {
    return this.countryCodeMap[countryName.toLowerCase()];
  }

  // 根据 ISO2 代码获取国家属性
  getCountryProperties(countryCode: string): Observable<any> {
    const url = `${this.apiUrl}/${countryCode}?format=json`;
    return this.http.get(url);
  }
}

登录后复制

在这个示例中，getAllCountries() 方法从 API 获取所有国家信息，并创建一个 countryCodeMap 对象，该对象将国家名称（转换为小写）映射到 ISO2 代码。getCountryCodeByName() 方法用于根据国家名称查找 ISO2 代码。

3. 修改组件代码

修改 country-info.component.ts 文件，使用新的 WorldbankService 方法。

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;

  constructor(private worldbankService: WorldbankService) {}

  ngOnInit(): void {
    // 在组件初始化时加载所有国家信息
    this.worldbankService.getAllCountries().subscribe();
  }

  getCountryProperties() {
    const countryCode = this.worldbankService.getCountryCodeByName(this.countryName);
    if (countryCode) {
      this.worldbankService.getCountryProperties(countryCode).subscribe(
        (data: any) => {
          this.countryProperties = data[1][0];
        },
        (error) => {
          console.error('Error fetching country properties:', error);
          this.countryProperties = null;
        }
      );
    } else {
      this.countryProperties = null;
      alert('Country not found.');
    }
  }
}

登录后复制

在这个示例中，ngOnInit 生命周期钩子用于在组件初始化时加载所有国家信息。getCountryProperties() 方法首先使用 getCountryCodeByName() 方法获取 ISO2 代码，然后使用该代码调用 getCountryProperties() 方法获取国家属性。