Всем привет! Не могу понять, как получить данные из одного общего массива, в котором хранятся объекты, в которых есть другой массив, содержащий два объекта :) Эта вложенность она просто убивает. Получаю только значения свойства key, т.е. только букву с которой начинается имя автора. Необходимо получить и вставить через шаблонные строки следующие значения: authors => items => author и authors => items => books.length. Чтобы в разметке выводились имя автора и количество его книг.
<h1>Библиотека современных авторов</h1>
<section class="author-filter">
<h2>Поиск авторов по алфавиту</h2>
<nav class="main-nav">
<ul class="site-nav">
<!--ссылки из букв-->
<li class="site-nav-item">
<a class="site-nav-link" href="#а">А</a>
</li>
<li class="site-nav-item">
<a class="site-nav-link">Б</a>
</li>
<li class="site-nav-item">
<a class="site-nav-link" href="#в">В</a>
</li>
<li class="site-nav-item">
<a class="site-nav-link">Г</a>
</li>
<li class="site-nav-item">
<a class="site-nav-link" href="#Д">Д</a>
</li>
</ul>
</nav>
</section>
<section class="authors">
<section class="authors-section">
<h2 id="А">А</h2>
<ul class="author-list">
<li class="author-item">
<a class="author-link" data-value="Абрагимов Руслан" href="#">
<h3>Абрагимов Руслан</h3>
<p>12 книг</p>
</a>
</li>
<li class="author-item">
<a class="author-link" data-value="Абрамова Валентина" href="#">
<h3>Абрамова Валентина</h3>
<p>6 книг</p>
</a>
</li>
<li class="author-item">
<a class="author-link" data-value="Абрамс Рей" href="#">
<h3>Абрамс Рей</h3>
<p>5 книг</p>
</a>
</li>
<li class="author-item">
<a class="author-link" data-value="Азарова Александра" href="#">
<h3>Азарова Александра</h3>
<p>8 книг</p>
</a>
</li>
</ul>
</section>
const authors = [
{
key: 'А',
items: [
{
author: 'Адамс Гай',
books: [
{
genre: 'Детские книги',
title: 'Очень добрая история',
year: '2020',
img: 'book-cover-345.jpg',
price: '560 ₽',
summary: 'Мудрая и добрая сказка, в которой просто и проникновенно говорится о самом важном: о дружбе, любви, о том, как важно помогать друг другу. Книга знакомит читателя с историей девочки Анны, которая приехала в маленький угрюмый городок. Своими поступками она запустила цепочку добрый дел и подружила всех жителей города, которые уже и забыли, как радоваться жизни.',
},
{
genre: 'Детские книги',
title: 'Чудище по имени Лень',
year: '2019',
img: 'book-cover-348.jpg',
price: '480 ₽',
summary: 'Сказка о необычном чудовище, которое иногда приходит ко всем. Герои сказки узнают, что это самая обычная лень, которая живёт в каждом из нас. На борьбу с ленью они приглашают звёздного мага, который способен победить чудовище.',
},
{
genre: 'Детские книги',
title: 'Загадка таинственного озера',
year: '2018',
img: 'book-cover-347.jpg',
price: '630 ₽',
summary: 'Тайну этого озера не могут разгадать уже много лет. Но оно совсем не страшное, а наоборот, с волшебной и чистой водой, способной дать силу и уставшему путнику и раненому зверю.',
},
],
},
{
author: 'Агутин Леонид',
books: [
{
genre: 'Детские книги',
title: 'Лесной оркестр',
year: '2019',
img: 'book-cover-346.jpg',
price: '1100 ₽',
summary: 'Все жители леса объединились, чтобы устроить Мишке сюрприз на День Рождения. Что же было подарком на День Рождения и как отметили этот день лесные жители.',
},
{
genre: 'Художественная литература',
title: 'Хранитель снов',
year: '2016',
img: 'book-cover-353.jpg',
price: '460 ₽',
summary: 'Происходит ужасное – у всех людей в мире пропали добрые сны и мечты. На помощь приходит хранитель снов. Но ему не обойтись без помощи своих юных друзей.',
},
],
},
],
},
{
key: 'Б',
items: [
{
author: 'Белицкая Светлана',
books: [
{
genre: 'Хобби и досуг',
title: 'Беззаботная лама',
year: '2017',
img: 'book-cover-350.jpg',
price: '460 ₽',
summary: 'Легкая и юмористическая история о ламе, которую ничего никогда не заботит. У нее все всегда хорошо. Ничто на свете не может огорчить беззаботную ламу.',
},
],
},
],
},
{
key: 'В',
items: [
{
author: 'Вагнер Марк',
books: [
{
genre: 'Художественная литература',
title: 'Единорожка',
year: '2015',
img: 'book-cover-354.jpg',
price: '760 ₽',
summary: 'Приключения забавного и неуклюжего единорожки Лилу, который отправился на поиски друзей. Добрая и поучительная история, полная забавных приключений.',
},
],
},
],
},
{
key: 'Г',
items: [],
},
{
key: 'Д',
items: [],
},
{
key: 'Е',
items: [],
},
{
key: 'Ё',
items: [],
},
{
key: 'Ж',
items: [],
},
{
key: 'И',
items: [],
},
{
key: 'Й',
items: [],
},
{
key: 'К',
items: [],
},
{
key: 'Л',
items: [],
},
{
key: 'М',
items: [],
},
{
key: 'Н',
items: [],
},
{
key: 'О',
items: [],
},
{
key: 'П',
items: [],
},
{
key: 'Р',
items: [],
},
{
key: 'С',
items: [],
},
{
key: 'Т',
items: [],
},
{
key: 'У',
items: [],
},
{
key: 'Ф',
items: [],
},
{
key: 'Х',
items: [],
},
{
key: 'Ц',
items: [],
},
{
key: 'Ч',
items: [],
},
{
key: 'Ш',
items: [],
},
{
key: 'Щ',
items: [],
},
{
key: 'Ы',
items: [],
},
{
key: 'Э',
items: [],
},
{
key: 'Ю',
items: [],
},
{
key: 'Я',
items: [],
},
];
const authorsSection = document.querySelector('.authors-section');
authorsSection.innerHTML = '';
const listAuthors = authors.map((author) => `
<h2 id=${author.key}>${author.key}</h2>
<ul class="author-list">
<li class="author-item">
<a class="author-link" data-value="" href="#">
<h3>${author.items}</h3>
<p>${author.items}книг</p>
</a>
</li>
</ul>
`).join('');
authorsSection.insertAdjacentHTML('beforeend', listAuthors);