使用 API 自动填充表单选项？

Question

我想列出用户可以输入的可用股票，但是api中可用的数量很多，目前我只是手动添加选项来测试它是否有效。有没有办法让 api 自动填写表格中的选项？

这是html表格：

 `<form method="post" action="" name="form">  
  <select name="stock">
      <option value="IBM">IBM</option>
      <option value="CELH">CELH</option>
      <option value="MAXR">MAXR</option>
      <option value="IMAB">IMAB</option>
  </select>
  <input name="submit" type="submit">
  </form>`

这是api调用json文件的格式：

`{
"data": [
    {
        "symbol": "A",
        "name": "Agilent Technologies, Inc.",
        "currency": "USD",
        "exchange": "NYSE",
        "mic_code": "XNYS",
        "country": "United States",
        "type": "Common Stock"
    },`

有没有办法只获取代码并将其作为选项添加到表单中？

Answer 1

在加载页面时，您可以获取 API 的数据，然后循环遍历对象的数据部分。然后简单地为每个符号创建一个新选项并将其附加到选择。

let data = {
"data": [
    {
        "symbol": "A",
        "name": "Agilent Technologies, Inc.",
        "currency": "USD",
        "exchange": "NYSE",
        "mic_code": "XNYS",
        "country": "United States",
        "type": "Common Stock"
    }
   ]
}

let stocks = document.querySelector("select[name='stock']");

data.data.forEach((s) => {
  let opt = document.createElement("option");
  opt.value = s.symbol
  opt.text = s.name
  stocks.appendChild(opt)
});

<form method="post" action="" name="form">  
  <select name="stock">
  </select>
  <input name="submit" type="submit">
  </form>