Given the following structure and data:

interface GrandChild {
    id: number,
    values: Array<string>,
}

interface Child {
    id: number,
    subItems: Array<GrandChild>
}

interface Foo {
    items: Array<Child>
}

const data: Foo = {
    items: [
        { id: 1, subItems: [ { id: 10, values: ['10', '100'] }, { id: 11, values: ['11', '110', '1100'] } ] },
        { id: 2, subItems: [ { id: 20, values: ['REMOVE', 'REMOVE'] }, { id: 21, values: ['REMOVE'] } ] },
        { id: 3, subItems: [ { id: 30, values: ['REMOVE'] }, { id: 31, values: ['REMOVE'] }, { id: 32, values: ['REMOVE', '32'] } ] },
    ]
};

How can I use the Array's methods (filter, map, some, etc.) to achieve the following result?

const expected: Foo = {
    items: [
        { id: 1, subItems: [ { id: 10, values: ['10', '100'] }, { id: 11, values: ['11', '110', '1100'] } ] },
        { id: 3, subItems: [ { id: 32, values: ['32'] } ] },
    ]
}

So far, I filtered the resulting data, removing the undesired elements, as following:

const filteredData: Foo = {
    ...data,
    items: data.items.map(item => ({
        ...item,
        subItems: item.subItems.map(subItem => ({
            ...subItem,
            values: subItem.values.filter(value => value !== 'REMOVE')
        }))
    }))
}

Resulting:

{
    items: [
        { id: 1, subItems: [ { id: 10, values: ['10', '100'] }, { id: 11, values: ['11', '110', '1100'] } ] },
        { id: 2, subItems: [ { id: 20, values: [] }, { id: 21, values: [] } ] },
        { id: 3, subItems: [ { id: 30, values: [] }, { id: 31, values: [] }, { id: 32, values: ['32'] } ] },
    ]
};

But, I cannot figure a way out to remove the empty subItems elements without looping through the result.

You can check online the above code here.

CodePudding user response：

If you really want to do it just with filter and map, add a filter after each of your maps to remove subItems that have an empty values array and to remove items that have an empty subItems array:

const filteredData = {
    ...data,
    items: data.items
        .map((item) => ({
            ...item,
            subItems: item.subItems
                .map((subItem) => ({
                    ...subItem,
                    values: subItem.values.filter((value) => value !== "REMOVE"),
                }))
                .filter(({ values }) => values.length > 0), // ***
        }))
        .filter(({subItems}) => subItems.length > 0),       // ***
};

But:

• When I have map followed by filter, I always ask myself if the data is large enough that I should avoid making multiple passes through it.
• When I'm doing lots of nesting of map calls and such, I always ask myself if it would be clearer when reading the code later to use simpler, smaller loops.

Here's what you might do if answering "yes" to either or both of those questions:

const filteredData: Foo = {
    ...data,
    items: [],
};
for (const item of data.items) {
    const subItems: Array<GrandChild> = [];
    for (const subItem of item.subItems) {
        const values = subItem.values.filter((value) => value !== "REMOVE");
        if (values.length) {
            subItems.push({
                ...subItem,
                values,
            });
        }
    }
    if (subItems.length > 0) {
        filteredData.items.push({
            ...item,
            subItems,
        });
    }
}