如何使用来自 API 的 JSON 填充选择列表？

Posted 2023-05-08

【中文标题】如何使用来自 API 的 JSON 填充选择列表？

【英文标题】：How to populate select list with JSON from API?

【发布时间】：2021-05-05 02:56:29

【问题描述】：

我有来自 API 调用的 JSON 响应，如下所示：

"results": 
"AF": 
"alpha3": "AFG",
"currencyId": "AFN",
"currencyName": "Afghan afghani",
"currencySymbol": "؋",
"id": "AF",
"name": "Afghanistan"
,
"AI": 
"alpha3": "AIA",
"currencyId": "XCD",
"currencyName": "East Caribbean dollar",
"currencySymbol": "$",
"id": "AI",
"name": "Anguilla"
,
"AU": 
"alpha3": "AUS",
"currencyId": "AUD",
"currencyName": "Australian dollar",
"currencySymbol": "$",
"id": "AU",
"name": "Australia"
,

... and so on

我正在尝试填充选择列表：

<select id="locality-dropdown" name="locality"></select>

使用 jQuery：

        var url =
          "https://free.currconv.com/api/v7/countries?apiKey=[apiKey]";

        $.getJSON(url, function (data) 
          $.each(data, function (index, value) 
           

            $("#locality-dropdown").append(
              '<option value="' + value + '">' + value + "</option>"
            );
          );
        );`

获取国家名称作为我的文本和货币 ID 作为我的选项值，但我得到的只是 [object object]。谁能告诉“价值”要添加什么，以便循环遍历给定的数据？

【参考方案1】：

你在哪里...

$.getJSON() 请求产生的 data 是一个对象。

它似乎是一个 results 属性持有另一个对象。 在那个内部对象中有许多其他对象，这些对象由一些可能未知的属性名称...

使用$.each() 可以在array 上正常工作。对于一些嵌套对象，略有不同。

在我使用的for in循环中，item（依次）是：AF、AI、AU...

我不知道您希望使用那些“最内层” 对象的哪个属性...但假设您想要name：

let getJSON_response = 
  "results": 
    "AF": 
      "alpha3": "AFG",
      "currencyId": "AFN",
      "currencyName": "Afghan afghani",
      "currencySymbol": "؋",
      "id": "AF",
      "name": "Afghanistan"
    ,
    "AI": 
      "alpha3": "AIA",
      "currencyId": "XCD",
      "currencyName": "East Caribbean dollar",
      "currencySymbol": "$",
      "id": "AI",
      "name": "Anguilla"
    ,
    "AU": 
      "alpha3": "AUS",
      "currencyId": "AUD",
      "currencyName": "Australian dollar",
      "currencySymbol": "$",
      "id": "AU",
      "name": "Australia"
    
  


// Replacing the $.each loop with a for in loop:
//
for (item in getJSON_response.results) 

  // Get the name property of each most inner object
  let name = getJSON_response.results[item].name

  // Use it in the append
  $("#locality-dropdown").append(
    '<option value="' + name + '">' + name + "</option>"
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="locality-dropdown" name="locality"></select>

【参考方案2】：

您可以通过将选项构建为 html 字符串然后只改变一次 <select> 来更有效地执行此操作。此外，您似乎想要迭代 data.results，而不是 data 本身。最后要提到的是，$.each() 对对象的迭代与对数组的迭代不同。对于数组，它是function(index, value)，但对于一个对象，它是function(key, object)。在此代码中，key 将是 country_abbreviation，object 将是 country（或该国家/地区的数据）

$.getJSON(`https://free.currconv.com/api/v7/countries?apiKey=[apiKey]`, function (data) 
  let optoins_html = ``;

  $.each(data.results, function (country_abbreviation, country) 
     options_html += `<option value="$country.currencyId">$country.name</option>`;
  );

  $("#locality-dropdown").html(options_html);
);

另外，作为个人喜好，如果您不打算在代码中使用 url 否则将其设置为变量是没有意义的，您可以直接在 $.getJSON() 中使用它功能。这种方式更具可读性，并且不会在代码的其他地方意外改变它。

https://api.jquery.com/jquery.each/

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Template_literals