• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

299
Views
RoR-STimulus-Fetch-API : how to add something fetched to DB

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 !

about 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error