如何借助jQuery将API返回的JSON正确填充至select下拉列表解决[object Object]显示问题

现有代码的两处核心问题 #

• 数据层级定位错误：接口返回的JSON并非直接存放国家列表，所有国家条目都包裹在最外层的results字段下。原代码直接遍历顶层响应对象，拿到的遍历值本身就是整个包含所有国家的大对象，拼接进字符串时就会显示为[object Object]。
• 字段取值不匹配需求：每个国家条目都是独立的对象，不能直接把整个对象作为option的value和文本，需要从对象内部提取对应字段：选项的value属性需要设置为对象内的currencyId（货币ID），选项可见的展示文本需要设置为对象内的name（国家名称）。

调整后的可运行代码 #

var url = "https://free.currconv.com/api/v7/countries?apiKey=[apiKey]";
$.getJSON(url, function (data) {
    // 定位到实际存储国家数据的对象层
    const countryList = data.results;
    $.each(countryList, function (key, country) {
        // 从单个国家对象中提取需要的两个字段
        const optionVal = country.currencyId;
        const optionLabel = country.name;
        // 拼接正确的option节点
        $("#locality-dropdown").append(`<option value="${optionVal}">${optionLabel}</option>`);
    });
});

可选优化提示 #

如果接口返回的多个国家共用同一个货币ID（比如东加勒比区域多个国家都对应XCD），下拉列表会出现重复的value值。如果需要规避重复选项，可以在遍历过程中维护一个已存在货币ID的集合，遇到重复值时跳过拼接即可。

内容的提问来源于stack exchange，提问作者user14672486