Нужно вывести на страницу название фильма и постер, а также динамически создать кнопку для каждого фильма. Названия и постеры находятся в разных массивах. С выводом только названия проблем не возникает (на скриншоте красными стрелками, между названием и кнопкой, отмечены места куда должны выводится постеры), а вот вывести постеры не получается.
https://drive.google.com/file/d/1pSu...ew?usp=sharing
Используя метод map, не знаю как вывести постеры из другого массива
document.getElementById(movieL).innerHTML = '<h3>'+ arr_RU[k] +'</h3><ul class="category-list clearfix">' + arrFinal.map(function (wizard) {
return '<li id = '+ k +' class="category-item"><a href="https://ru.wikipedia.org//wiki/'+ wizard + '">' + wizard + '</a><div id="btn"><button onclick="openLink(this)" id="btn">Смотреть фильм</button></div></li>';
}).join('') + '</ul>';
Если же я создаю объект из 2-х массивов и вывожу его используя код приведенный ниже, то заголовок <h3> оказывается в цикле и выводится большее кол-во раз чем требуется.
for(let objValues in obj){
val += '<h3>'+ arr_RU[k] +'</h3><ul class="category-list clearfix"><li id = '+ k +' class="category-item"><a href="https://ru.wikipedia.org//wiki/'+ objValues + '">' + objValues + '</a><img src = '+ obj[objValues] +'><div id="btn"><button onclick="openLink(this)" id="btn">Смотреть фильм</button></div></li></ul>';
}
document.getElementById(movieL).innerHTML = val;
Как решить данную проблему?