Перебор массива при помощи jquery

Рейтинг: 0Ответов: 1Опубликовано: 29.03.2023

Есть вот такой массив данных

export const asideMenu = [
    {titleMenu: 'Shop', linksTitleMenu: [
        {link: 'Paints', href: '#'},
        {link: 'Samples', href: '#'},
        {link: 'Supplies', href: '#'}
    ]},
    {titleMenu: 'Discover', linksTitleMenu: [
        {link: 'Gallery', href: '#'},
        {link: 'Air purifying', href: '#'},
        {link: 'Pro', href: '#'}
    ]},
    {titleMenu: 'About', linksTitleMenu: [
        {link: 'About us', href: '#'},
        {link: 'FAQ', href: '#'},
        {link: 'Shipping & Returns', href: '#'}
    ]},
]

При переборе данных я вывожу вот так

$.map(asideMenu, (item) => {
    $('.aside-menu').append(
        `<ul class="aside-menu-item">
        <li class="aside-menu-item__item">${item.titleMenu}</li>
        </ul>`)
}
)

Как мне сделать так, чтобы я мог выводить link linksTitleMenu в блок aside-menu-item? У меня почему-то выводится все link в первый блок ключа

javascript jquery массивы
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Чтобы вывести ссылки linksTitleMenu в блок aside-menu-item, вам нужно добавить еще один цикл для перебора ссылок, как показано ниже:

$.map(asideMenu, (item) => {
let linksHtml = '';
$.map(item.linksTitleMenu, (link) => {
    linksHtml += `<li class="aside-menu-item__link"><a href="${link.href}">${link.link}</a></li>`;
});
$('.aside-menu').append(
    `<ul class="aside-menu-item">
    <li class="aside-menu-item__item">${item.titleMenu}</li>
    ${linksHtml}
    </ul>`
);

});