Processing an array and subarray in ES6 using the map function

Question

I am trying to render a multilevel array using the map function. How do I display a subarray?

The «Home» variable should return a render of a JSON array. The array itself is multilevel, each array has a subarray category_forums. The .map() function handles the first-level arrays without problems, but when I try to access the subarray, errors appear (indicating that another character is expected).

I tried to process differently (.map(function (category) { instead .map(category =>) but nothing changes when I try to use the map function for 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 () => {
    }
}

Currently, the function returns only category_id and category_title, and instead of category_forums it returns [object Object].

Sercan Paspal · Accepted Answer · 2019-02-06 06:36:29Z

1

Can you try like this?

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

answered Feb 6, 2019 at 6:36

Sercan Paspal

988 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

morganchees Over a year ago

Works great. Only need to add category. before category_forums. I will mark your answer as correct as soon as the opportunity arises. Thanks.

Sercan Paspal Over a year ago

I just realized a few second ago and fixed it :)

mohan rathour · Accepted Answer · 2019-02-06 06:42:26Z

0

You can try this

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

answered Feb 6, 2019 at 6:42

mohan rathour

4302 silver badges12 bronze badges

Collectives™ on Stack Overflow

Processing an array and subarray in ES6 using the map function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related