Рисуем страницу по данным

Загруженные данные — это обычно массив объектов, и страница показывает их так, как вы знаете из урока о веб-страницах: функция очищает список и в цикле создаёт элементы для его пунктов. Новое здесь — откуда берётся массив. Храните его в переменной вне функций, чтобы страницу можно было перерисовать, когда пользователь что-то изменит, не обращаясь к серверу снова:

let books = [];

function showBooks() {
    bookList.textContent = "";
    const available = books.filter((book) => book.available);
    for (const book of available) {
        const item = document.createElement("li");
        const title = document.createElement("h2");
        title.textContent = book.title;
        const author = document.createElement("p");
        author.textContent = book.author;
        item.append(title, author);
        bookList.append(item);
    }
}

async function loadBooks() {
    const response = await fetch("books.json");
    books = await response.json();
    showBooks();
}

loadBooks();

Несколько моментов, на которые стоит обратить внимание:

• books находится вне функций и создаётся через let с пустым массивом. loadBooks() кладёт в неё загруженный массив, а showBooks() рисует по нему страницу. Когда данные получены, ими может пользоваться любая другая функция.
• filter() возвращает новый массив и не трогает books, поэтому при следующей отрисовке все книги снова на месте. Остальные методы массивов, такие как sort(), find() и map(), работают с загруженными данными так же, как с любым другим массивом.
• Внутри каждого пункта есть свои элементы: заголовок и абзац. Создавайте их тоже через createElement() и вкладывайте в пункт через append(), который может принять сразу несколько элементов.

Когда пользователь что-то выбирает на странице, обработчик лишь снова вызывает showBooks(). Функция считывает выбранное и рисует список заново. К серверу повторно никто не обращается: данные уже лежат в массиве.