在 ES6 中使用 map 函数处理数组和子数组答案

【问题标题】：Processing an array and subarray in ES6 using the map function在 ES6 中使用 map 函数处理数组和子数组
【发布时间】：2019-02-06 06:29:13
【问题描述】：

我正在尝试使用 map 函数呈现多级数组。如何显示子数组？

«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 Object]。

【问题讨论】：

标签： javascript arrays json ecmascript-6

【解决方案1】：

你可以这样试试吗？

${ 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 ')
}

【讨论】：

效果很好。只需要添加类别。在 category_forums 之前。一有机会，我会将您的答案标记为正确。谢谢。
几秒钟前我才意识到并修复了它:)

【解决方案2】：

你可以试试这个

{ 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 ')
}

【讨论】：