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

Question

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

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 в первый блок ключа

Answer 1

Чтобы вывести ссылки 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>`
);

});

БЛОГ НА HUSL

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

Ответы (1 шт):