如何使用Vanilla JavaScript将API调用中的数据存储到Firestore数据库中？

Question

I am bringing in data from an api call and outputting the data to html inside a template string using variables from the main.js file. All of that works fine. The problem that has me blocked is I want to have an add to favorites button that a user can click and add the title to a favorites list. When I add the button inside the template literal the addEvenListener I have for the button is null and if I add the button to the index.html I cannot access the data from the api. I am trying to store the data first into firestore database after the user clicks the button. Then output the data into a dropdown list.

I've added a collection to the firestore database and can display the data from the backend to the favorites list but I need to grab the data from the front end, store it on the back end, and display it in the favorites list.

 function getMovie(){
    let movieId = sessionStorage.getItem('movieId');
    // Make a request for a user with a given ID
    axios.get("https://api.themoviedb.org/3/movie/" + movieId + "? 
    api_key=redacted")
   .then(function (response) {
     console.log(response)
     let movie = response.data;
    //console.log(movie);
    let output = `
      <div class="dropdown">
        <button class="dropbtn" id="dropbtn">Favorites</button>
        <div id="myDropDown" class="dropdown-content"></div>
      </div>
  `;
  $('#movie').html(output);
  })
  .catch(function (error) {
    console.log(error);
  });     
}

addFavorite.addEventListener('submit', (e) => {
e.preventDefault();

firebase.firestore().collection('favorites').add({
   Title: addFavorite['movieid'].value

}).then(() => {
    //close 
    console.log(addFavorite)
})    
})

Not sure if I need to do another api call for this functionality or not. I did one api call to get a list of movies then another to get one movie. When the user goes to the one movie that is where I want the add favorite button. I hope someone knows how to lead me in the right direction. First time asking on Stackoverflow don't hurt me lol

Answer 1

i am taking simple ul list as example

<ul id="movie">
</ul>


<script>
    // DUMMY records
    const apiCallDataExample = [
        {
            id: 1,
            name: "A"
        },
        {
            id: 2,
            name: "B"
        },
        {
            id: 3,
            name: "C"
        }
    ];

    let movies = [];

    getMovie();

    function getMovie() {
        movies = apiCallDataExample; // You will call your API to get the data, and store it in upper scope 'movies' variable.
        let htmlContent = ''; // prepare your html content -> in your case it is droup down i guess.
        for (let movie of movies) {
            htmlContent += `
                <li>
                    <span> ${movie.name} </span>
                    <button onclick="addToFavourite(${movie.id})"> click me </button>
                </li>
            `

            // Attach click event or any listener to get selected movie id or any identifier
        }
        let elem = document.getElementById("movie").innerHTML = htmlContent;
    }


    /**
    *  click event will trigger and we can fetch selected movie by given identifier, in my case it is `id `field.
    */

    function addToFavourite(id) {
        let selected_movie = movies.find(movie => movie.id === id); // find your movie by id.
        console.log("selected movie is", selected_movie)
        // add your data into collection as per your defined property , my case { id, name}.

        /*

        // Your fire base function

        firebase.firestore().collection('favorites').add({
            id: selected_movie.id,
            name: selected_movie.name
        }).then(() => { })
        */
    }
</script>