Не удалось получить весь идентификатор API из функции

Question

Я работаю над OMDB API.но у меня есть проблема с получением удостоверения личности.Я создал глобальную переменную movieID, а затем передал ему идентификатор фильма из API внутри первой функции, и когда я пытаюсь получить эти идентификаторы в другой функции, я получаю только последний идентификатор списка MOVIES, который я получаю, который равен Нет.10.

const url = 'http://www.omdbapi.com/?s=';
const apiId = '&ap6465465454';
const input = document.querySelector('input');
const movieDtl = document.querySelector('.movie-detail');
const ul = document.querySelector('ul');
const xhr = new XMLHttpRequest();
var movieId = null;
let inputsearch;
let object;
let movieList;
let movieDetail;

input.addEventListener('keyup', getmovies);

function getmovies(e){
  e.preventDefault();
  if(e.keyCode === 13){
    inputsearch = input.value;
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
        getdatalist();
    }
   }
    xhr.open('GET', url + inputsearch + apiId, true);
    xhr.send();
 }
}

function getdatalist(){
    object = JSON.parse(xhr.response);
    movieList = object.Search;
    movieList.forEach(function(e){
        movieId = e.imdbID;
        // if i console log here it gives me all the ID's what i want inside this forEach function // 
        console.log(movieId);
        let list = document.createElement('li');
        movieDetail = '<img src="'+e.Poster+'" alt="Poster"><h4>'+e.Title+'</h4><button>View More</button>';
        list.innerHTML = movieDetail;
        ul.appendChild(list);
    }) 
        // Here it just give me the last ID of search Result // 
         console.log(movieId);
         getdata();
}

function getdata(){
    let vwbtn = document.querySelectorAll('ul li button');
    vwbtn.forEach(function(elem){
      elem.addEventListener('click', function(){

        // i want to get the id of each movie here when i click on selected button// 
        console.log(movieId);
      })
    })
}

HTML

<div id="search-div">
    <input type="text" placeholder="Search movie">
</div>

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

<div class="movie-detail">

</div>

Я спрашивал здесь раньше, но не получил ответа, люди предложили мне использовать LocalStorage, и я попробовал его, но он все еще хранит последний идентификатор,Я не знаю, где идет не так.Я новый программист, и это мой первый API-проект, поэтому, пожалуйста, если кто-нибудь может помочь, он будет признателен, и я также предоставил API-ключ, чтобы любой мог проверить ошибку.

Answer 1

Вы используете одну и ту же переменную все время, поэтому она сохраняет только последнюю.

позволяет сначала переименовать переменную, чтобы иметь больше смысла, так как мы хотим сохранить массив moviesId, поэтому

var moviesId = [];

здесь вы хотите сохранить его как массив всех идентификаторов movieIds, которые вы только чтоfetch,

movieList.forEach(function(e){
    moviesId.push(e.imdbID);

в ваших getdata мы вызываем функцию для печати необходимых вам вещей и передаем ей индекс

function getdata() {
    let vwbtn = document.querySelectorAll('ul li button');
    vwbtn.forEach(function(elem, index){
      elem.addEventListener('click', printStuff.bind(null, index) );
    })
},

и, наконец, функцию printStuff, которая будет отображать информацию, которую вынужно

function printStuff(index) {
    console.log(moviesId[index]);
}

Есть много способов справиться с этой проблемой, это только один из них, не стесняйтесь не соглашаться со мной или указывать любые проблемы, которые вы обнаружите