Перед нами стоит задача создать и вывести на страницу список книг из массива, хранящегося в базе данных на сервере. На практике это значит, что нужно статичную верстку данного списка полностью удалить со страницы и написать скрипт на JS для динамического вывода.
Статичная верстки
Данную верстку сформируем динамически.
<ul class="book__list">
<li class="book__item">
1.Заводной апельсин
</li>
<li class="book__item">
2.Виноваты звезды
</li>
<li class="book__item">
3.Ходячий замок
</li>
<li class="book__item">
4.Вторая жизнь Уве
</li>
<li class="book__item">
5.Прислуга
</li>
</ul>
Первым делом получим родителя ul, который оборачивает все эти книги в тегах li. Объявим переменную bookList, далее в документе обратимся по селектору к классу book__list.
const bookList = document.querySelector('.book__list');
Нам нужно убедиться, что внутри родителя ничего нет: обратимся к свойству переменной innerHTML и пропишем пустые кавычки. Таким образом мы очистили список перед началом работы.
bookList.innerHTML = "";
Теперь нам необходимо сформировать верстку при помощи JavaScript и поместить ее на страницу. Все элементы с которыми мы будем взаимодействовать, находятся в базе данных bookDB, в свойстве books. Нам нужно будет перебрать все значения, которые находятся в этом массиве и на их основании сформировать HTML структуру.
const bookDB = {
books: [
"Заводной апельсин",
"Виноваты звезды",
"Ходячий замок",
"Вторая жизнь Уве",
"Прислуга"
]
};
Для перебора массива используем метод forEach. Поместим вовнутрь callback функцию, в которую передадим два аргумента: book (название книги из массива) и счетчик i (содержащая порядковый номер книги). Нам необходимо все сгенерированную верстку поместить на HTML странице внутри тега ul. Для этого обратимся к пустой переменной bookList и методу innerHTML и через оператор дополнительно присваивания +=. Это значит, что при каждом повторе цикла, в переменную bookList добавится новая строка с названием книги. Откроем обратные кавычки и поместим фрагмент верстки, которую предстоит размножить.
bookDB.books.forEach((book, i) => {
bookList.innerHTML += `
<li class="book__item">${i + 1} ${book}
</li>
`;
});
Добавим нумерацию к выводимой книге. Поскольку в программировании нумерация начинается с нуля, то выводить номера нужно, начиная с единицы.
${i + 1} // вывод нумерации
${book} // вывод названия книги
Теперь верстка будет формироваться динамически и все книги из базы данных появятся на странице.
Весь JavaScript код
const bookDB = {
books: [
"Заводной апельсин",
"Виноваты звезды",
"Ходячий замок",
"Вторая жизнь Уве",
"Прислуга"
]
};
const bookList = document.querySelector('.book__list');
bookList.innerHTML = "";
bookDB.books.forEach((book, i) => {
bookList.innerHTML += `
<li class="book__item">${i + 1} ${book}
</li>
`;
});
Язык программирования JavaScript сейчас самый востребованный в веб-разработке и к счастью наиболее простой для новичка. С его помощью программисты делают сайты динамичными и «живыми». Мой видеокурс «Программирование на JavaScript с Нуля до Гуру 2.0», научит Вас думать на JavaScript, писать чистый и красивый код.