I am trying to add something I fetched from an API to my RoR DB.

So I have :

• my view :

  <div data-controller="album">
  
    <form data-album-target = "form"
       data-action="submit->album#update">
    <input  type="text"
          class="form-control"
          data-album-target="input">
  
    <div data-album-target="results"></div>
  
    </div>
  

• and my stimulus controller

    import { Controller } from "stimulus"
  
       export default class extends Controller {
      static targets = ["results", "input", "form"]
  
  update(event) {
    event.preventDefault();
    this.resultsTarget.innerHTML = "";
    const artistName = this.inputTarget.value;
    const url = `https://theaudiodb.com/api/v1/json/2/search.php?s=${artistName}`;
    fetch(url)
      .then(response => response.json())
      .then((data) => {
        this.findIdArtist(data);
      });
  }
  
  findIdArtist(data){
    data.artists.forEach((result) => {
      const idArtist = result.idArtist;
      const url2 = `https://theaudiodb.com/api/v1/json/2/album.php?i=${idArtist}`;
      fetch(url2)
        .then(response => response.json())
        .then((data) => {
          data.album.sort(function (a, b) { return a.intYearReleased - b.intYearReleased }).forEach((list) => {
            const album =
              `<div class="card">
                <img src=${list.strAlbumThumb}>
                <div class="albumtitle">
                  ${list.strAlbum}
                </div>
                <div class="albumyear">
                  ${list.intYearReleased}
                </div>
              </div>`
            this.resultsTarget.insertAdjacentHTML("beforeend", album)
          })
        });
    });
  }
  }
  

How could I have a "+" button which adds the albumID to my RoR database ? I tried with a POST fetch but I can't get it to work.

Any idea ?

Thanks !