Обработка массива и подмассива в ES6 с использованием функции карты

Question

Я пытаюсь визуализировать многоуровневый массив с помощью функции карты.Как отобразить подмассив?

Переменная «Home» должна возвращать рендер массива JSON.Сам массив является многоуровневым, каждый массив имеет подмассив category_forums.Функция .map () обрабатывает массивы первого уровня без проблем, но когда я пытаюсь получить доступ к подмассиву, появляются ошибки (указывающие на то, что ожидается другой символ).

Я пытался обрабатывать по-другому (.map(function (category) { вместо .map(category =>), но ничего не меняется, когда я пытаюсь использовать функцию карты для category.category_forums.

let Home = {
    render : async () => {
        let categories = await getCategories()
        // getCategories returns JSON: 
        // [  
        //    {  
        //       "category_id":"1", "category_title":"First category",
        //       "category_forums":[  
        //          {  "forum_id":"1", "forum_name":"Forum1" },
        //          {  "forum_id":"2", "forum_name":"Forum2" }
        //       ]
        //    },
        //    {  
        //       "category_id":"2", "category_title":"Second category",
        //       "category_forums":[  
        //          {  "forum_id":"3", "forum_name":"Forum3" },
        //          {  "forum_id":"4", "forum_name":"Forum4"}
        //       ]
        //    }
        // ]
        let view =  /*html*/`
            <section class="section">
                <h1> Categories </h1>
                <ul>
                    ${ categories.map(category => 
                        /*html*/`<li><a href="#/p/${category.category_id}">${category.category_title}</a></li>`

                        // here i need to process objects in category.category_forums

                        ).join('\n ')
                    }
                </ul>
            </section>
        `
        return view
    }
    , after_render: async () => {
    }
}

В настоящее время функция возвращаеттолько category_id и category_title, и вместо category_forums он возвращает [объект Object].

Answer 1

Вы можете попробовать это

{ categories.map(category => 
    /*html*/`<li><a href="#/p/${category.category_id}">${category.category_title}</a></li>`
    category.category_forums.map( category_forums_data=> 
        `<li><a href="#/p/${category_forums_data.forum_id}">${category_forums_data.forum_name}</a></li>`
      )
    // here i need to process objects in category.category_forums

    ).join('\n ')
}

Answer 2

Ты можешь попробовать вот так?

${ categories.map((category) => 
   `<li>
        <a href="#/p/${category.category_id}">${category.category_title}</a>
        <ul>
          ${category.category_forums.map((category_forum) => `<li>${category_forum. forum_name}</li>`)}
        </ul>
    </li>`



    ).join('\n ')
}