0

first i wanna apologize if my question isn't super clear..

howeverm i feel like i am close to figuring it out. what i wanna do is basically create a movie app Without React where you can favorite movies by basically clicking on the icon, it takes the ID from the movieDB API and pushes it into an array in localstorage

<a><i class="bi bi-bookmark" onclick="favMenu(${item.id})"></i></a>

function favMenu(movie_ID) {
    //SETTER
    faveArr.push(movie_ID)
    console.log(movie_ID)
    localStorage.setItem("favemovies", JSON.stringify(faveArr));

}

however, i am not succeeding at retrieving the movie posters into another page..

function getFav() {
    const x = JSON.parse(localStorage.getItem("favemovies"));
    console.log(x);
    axios.get(`https://api.themoviedb.org/3/movie/${x}?api_key=${API_KEY}&language=en-US`)
        .then((response) => {
            document.getElementById("try").innerHTML = response.data.map(item =>
                `  <div class="movie-card" id="mv">
            <img src="${IMG_URL+item.poster_path}" alt="movie poster" class="movie-poster">
            <div class="movie-info d-flex">
                <button type="button" class="btn-look btn-danger" data-bs-toggle="modal" data-bs-target="#detailCard" onclick="movieDeets(${item.id})">
                    Details
                  </button>
                 <div class="text-white p-1 float-end">
                 <a><i class="bi bi-bookmark" onclick="watchMenu(${item.id})"></i></a>
                 <a><i class="bi bi-heart" onclick="favMenu(${item.id})"></i></a>
              </div>
            </div>
        </div>
        <div class="modal fade" id="detailCard" tabindex="-1" aria-labelledby="detailCard" aria-hidden="true">
      <div class="modal-dialog">
      </div>
      </div>`


            ).join('')

        })
}

i keep getting this error instead..

Uncaught (in promise) TypeError: response.data.map is not a function
    at main.js:173:70
Sam Nakity
  • 1
  • 1
  • You can convert to an array using something like this ```[array]``` or ```[...array]```. In this case possibly doing ```[response.data]``` should convert to an array. Without an example I cannot reproduce for you to help out better. – Aidan Donnelly Mar 21 '22 at 11:55
  • log your response, response.data should be an array. – harpal Mar 21 '22 at 11:59
  • 1
    @AidanDonnelly i'll try to apply that approach, thanks! – Sam Nakity Mar 21 '22 at 12:00
  • The issue seems unrelated to the localstorage contents, rather the response from ajax handling – Krzysztof Krzeszewski Mar 21 '22 at 12:00
  • 1
    Can you update post to include a log of what ```response``` contains? – Aidan Donnelly Mar 21 '22 at 12:02
  • you are sending JSON.parsed as a query string, that might be an issue and you are not getting the correct response from the server. show an example what your api expects and what is in local storage. (example only) – harpal Mar 21 '22 at 12:04

0 Answers0