Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

89
Views
How to convert array in localstorage to JSON that can be used to render elements into div?

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
about 4 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 Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!