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 !