What is the correct syntax to destructure object in JS while mapping over array?

Question

I have an array of objects and I want to.map() over the array while destructuring elements. Is there a way to achive it?

I currently have:

const nav = documents.map((category, index) => {
        const categoryName = category.data.category_name[0].text;
        console.log(index);
        return categoryName;
    });

I want to achieve:

const nav = documents.map((*destructure here so I get .text property*, index) => {
        const categoryName = category.data.category_name[0].text;
        console.log(index);
        return categoryName;
    });

edit: please note I do need index index too.

Answer 1

You can do it as long as you only want index 0 of the category_name arrays. You simply use array destructuring at that level to assign a variable from that index. And that variable is inside another destructured object.

 documents = [{ data: { category_name: [{ text: "Title 1" }] } }, { data: { category_name: [{ text: "Title 2" }, { text: "Title 3" }] } }]; const nav = documents.map(({ data: { category_name: [{ text: category_name }] } }, index) => { console.log(index); return category_name; }); console.log(nav);

As you can see, the destructuring pattern is just like the object literal, except that you replace the value you want to grab with the variable.