Use API to autofill form options?

Question

I want to list the available stocks a user can input, but the amount available in the api is a lot and currently I have just manually added the options to test if it works. Is there a way I can get the api to auto fill the options in the form?

This is the html form:

 `<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>`

This is the format of the api call json file:

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

Is there a way to get only the ticker and add it as an option to the form?

Answer 1

On loading of the page, you can get the API's data then loop through the data part of the object. Then simply create a new option for each symbol and append it to the select.

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

function parseData(data) {
  data.data.forEach((s) => {
    let opt = document.createElement("option");
    opt.value = s.symbol
    opt.text = s.symbol
    stocks.appendChild(opt)
  });
}
$.getJSON("https://api.twelvedata.com/stocks?exchange=NYSE", parseData)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="" name="form">
  <select name="stock">
  </select>
  <input name="submit" type="submit">
</form>