@Dmitrii-Milk
Хочу научится писать качественный код

Как записать элемент из массива на страницу?

При вводе в поисковою строку какого-либо фильма, актера или сериала мне возвращается массив с наименованием эти фильмов сериалов актеров который записан в переменную getTitle, как мне записать элементы массива в список? Чтобы было так:
  • getTitle[0]
  • getTitle[1]
  • getTitle[2]

если с первой частью все норм, то вот такая запись у меня не получается; Получается что title приходит просто одной строкой. Как можно решить данную задачу? Можно не прям готовый код, можно напутствие, или может кто расскажет алгоритм как это делать. Буду очень признателен за любую информацию. Спасибо!
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <header>
            <div> 
                <form class="form-inline">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0 btn-search" type="submit">Search</button>
                </form>
            </div>
	  <div class="searcheable">
	  </div>
    <script src="scritp.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

const url = 'https://api.themoviedb.org/3/search/movie?api_key=',
      apiKey = '7f1b6f50ab71568f7ee0decc0d54b44a',
      IMAGE_URL = 'https://image.tmdb.org/t/p/w500';

let inputSearch = document.querySelector('.form-control'),
    searchBtn = document.querySelector('.btn-search'),
    searcheable = document.querySelector('.searcheable');

searchBtn.addEventListener('click', function(event) {
    event.preventDefault();
    const searchValue = inputSearch.value;
    let searchUrl = url + apiKey + '&query=' + searchValue + '&language=ru';

    let xhr = new XMLHttpRequest;
    xhr.open('GET', searchUrl, true);
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    xhr.responseType = 'json';

    xhr.addEventListener('load', function() {
        const data = xhr.response;
        const dataResult = data.results;

      console.log(dataResult);

        let getTitle = dataResult.map((currentValue) => {
            return currentValue.title;
        });

        console.log(getTitle);

        searcheable.innerHTML = `<ul><li>${getTitle}</li></ul>`;
    });

xhr.send();
});
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
hzzzzl
@hzzzzl
такое?

titles = ['title one', 'title two', 'title three']

searcheable.innerHTML = `<ul>
  ${ titles.map( t => `<li>${t}</li>` ).join('') }
</ul>`

/*
<ul>
 <li>title one</li><li>title two</li><li>title three</li>
</ul>
*/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы