Best way to dynamically change number and content of <OPTION> in <SELECT> from a fetch promise

[Alex-Stanfield]

Hi, I'm needing help to change the number of options in a select when a "fetch" promise is executed.

Scenario: On page load a fetch is done in order to bring a json with values. I'd like to update (expand) the number of options in a select according to the data received.

<div class="container" x-data="{ canales:[1,2,3], canal:2}">
   <select x-model="canal">
      <template x-for="canal in canales" :key="canal">
         <option :value="canal" x-text="canal"></option>
      </template>
   </select>
</div>

 <script type="text/javascript">
   fetch('/series/')
   .then((response) => response.json())
   .then((pdata) => {
      data = pdata;
      canales = data.chans;
   });
</script>

I'd like to update "canales" and kind of re-render that select for the user. Of course the above code will not do...

Which would be the best way to do this?

Thanks in advance for your help!

Alex

[SimoTod]

Use x-init: https://postsrc.com/code-snippets/how-to-feetch-api-in-alpine-js

[ekwoka]

You can use x-init, or init method on the data to get it on load.

You can have a method that fetches it and changes the data inline if you want it reactive to some other values.

(not alpine, but make sure you also have name property on your select 👍 )

[Alex-Stanfield]

Thanks for all replies!

I finally decided to go the Alpine.store() way, like this:

...
    <select
      x-model="$store.alex.canalElegido"
      @change="$store.alex.chgCanal()"
      autofocus
    >
      <template x-for="option in $store.alex.canales">
        <option
          :key="option.value"
          :value="option.value"
          x-text="option.text"
        ></option>
      </template>
    </select>
...
<script type="text/javascript">

    function initialLoad() {
      fetch('/series/')
      .then((response) => response.json())
      .then((pdata) => {
          Alpine.store('alex').series = pdata.series;
          Alpine.store('alex').canales = pdata.canales.map((item, index) => ({value: index, text: item}));
          Alpine.store('alex').canalElegido = 0;
          Alpine.store('alex').chgCanal();

      })
    };

  document.addEventListener('alpine:init', () => {
      Alpine.store('alex', {
          canalElegido: '',
          canales: [], 
          series: [], 
          chgCanal() {
              chart_temp.updateSeries([this.series[this.canalElegido]], false);
              chart_zoom.updateSeries([this.series[this.canalElegido]], false);
          },
      });
      initialLoad();
  });
</script>

It may not be mandatory but just in case i need to update from outside the context of Alpine components.

Best regards
Alex

[ekwoka]

Why not just put an init method on the store that does the loading of the data?

  document.addEventListener('alpine:init', () => {
      Alpine.store('alex', {
          canalElegido: '',
          canales: [], 
          series: [], 
          chgCanal() {
              chart_temp.updateSeries([this.series[this.canalElegido]], false);
              chart_zoom.updateSeries([this.series[this.canalElegido]], false);
          },
          async init() {
              const res = await fetch('/series/')
              const data = await res.json()
              
              this.series = data.series;
              this.canales = data.canales.map((item, index) => ({value: index, text: item})
              this.canalElegido = '0'; 
              this.chgCanal();
          }
      });
  });