过滤器数组,创建嵌套选项

时间:2018-01-12 09:56:10

标签: javascript reactjs

我有一个类别列表,父类别的父值为0.

我正在尝试过滤我的数据并创建一个名为options的新数组,其中包含父类子类的名称/。

这是我的代码:

export function getCategories(state = [], action) {
    switch (action.type) {
        case "FETCH_DATA_SUCCESS":
            const categorys = {};

            // get sub and parent cats in their own array
            const subCategories = action.data.categories.filter(
                category => category.parent > 0
            );
            const parentCategories = action.data.categories.filter(
                category => category.parent == 0
            );
            person => {
                if (person.age > 18) return person;
            };

            parentCategories.map(parentCategory => {
                //map parent and create options containing name and id
                let options = subCategories.filter(subCategory => {
                    if (subCategory.parent == parentCategory.id)
                        return subCategory;
                });

                categorys[i] = {
                    id: parentCategory.id,
                    label: parentCategory.name,
                    options: options
                };
            });

            return categorys;

        default:
            return state;
    }
}

我的数据如下:

{
    "rest_url": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/",
    "total": 6,
    "total_pages": 1,
    "categories": [
        {
            "id": 59,
            "count": 2,
            "description": "",
            "name": "firm1",
            "slug": "firm1",
            "taxonomy": "tribe_events_cat",
            "parent": 60,
            "meta": [],
            "url": "http://wordpress.rguc.co.uk/events/category/year1/firm1/",
            "urls": {
                "self": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/59",
                "collection": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories",
                "up": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/60"
            }
        },
        {
            "id": 65,
            "count": 1,
            "description": "",
            "name": "firm1",
            "slug": "firm1-year2",
            "taxonomy": "tribe_events_cat",
            "parent": 63,
            "meta": [],
            "url": "http://wordpress.rguc.co.uk/events/category/year2/firm1-year2/",
            "urls": {
                "self": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/65",
                "collection": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories",
                "up": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/63"
            }
        },
        {
            "id": 68,
            "count": 1,
            "description": "",
            "name": "firm3",
            "slug": "firm3",
            "taxonomy": "tribe_events_cat",
            "parent": 64,
            "meta": [],
            "url": "http://wordpress.rguc.co.uk/events/category/year3/firm3/",
            "urls": {
                "self": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/68",
                "collection": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories",
                "up": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/64"
            }
        },
        {
            "id": 60,
            "count": 1,
            "description": "",
            "name": "year1",
            "slug": "year1",
            "taxonomy": "tribe_events_cat",
            "parent": 0,
            "meta": [],
            "url": "http://wordpress.rguc.co.uk/events/category/year1/",
            "urls": {
                "self": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/60",
                "collection": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories"
            }
        },
        {
            "id": 63,
            "count": 1,
            "description": "",
            "name": "year2",
            "slug": "year2",
            "taxonomy": "tribe_events_cat",
            "parent": 0,
            "meta": [],
            "url": "http://wordpress.rguc.co.uk/events/category/year2/",
            "urls": {
                "self": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/63",
                "collection": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories"
            }
        },
        {
            "id": 64,
            "count": 1,
            "description": "",
            "name": "year3",
            "slug": "year3",
            "taxonomy": "tribe_events_cat",
            "parent": 0,
            "meta": [],
            "url": "http://wordpress.rguc.co.uk/events/category/year3/",
            "urls": {
                "self": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/64",
                "collection": "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories"
            }
        }
    ]
}

我希望我的新数据看起来像这样:

   [
            {
                id: 0,
                label: "Year 1",
                value: 1,
                options: [
                    { name: "Firm 1", id: 1 },
                    { name: "Firm 2", id: 2 },
                    { name: "Firm 3", id: 3 }
                ]
            },
            {
                id: 1,
                label: "Year 2",
                value: 2,
                options: [
                    { name: "Firm 4", id: 4 },
                    { name: "Firm 5", id: 5 },
                    { name: "Firm 6", id: 6 }
                ]
            },
            {
                id: 2,
                label: "Year 3",
                value: 3,
                options: [
                    { name: "Firm 7", id: 7 },
                    { name: "Firm 8", id: 8 },
                    { name: "Firm 9", id: 9 }
                ]
            }
        ];

1 个答案:

答案 0 :(得分:0)

您可以映射结果以获取数组而不是索引为键的对象。



const action = { data: { rest_url: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/", total: 6, total_pages: 1, categories: [{ id: 59, count: 2, description: "", name: "firm1", slug: "firm1", taxonomy: "tribe_events_cat", parent: 60, meta: [], url: "http://wordpress.rguc.co.uk/events/category/year1/firm1/", urls: { self: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/59", collection: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories", up: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/60" } }, { id: 65, count: 1, description: "", name: "firm1", slug: "firm1-year2", taxonomy: "tribe_events_cat", parent: 63, meta: [], url: "http://wordpress.rguc.co.uk/events/category/year2/firm1-year2/", urls: { self: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/65", collection: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories", up: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/63" } }, { id: 68, count: 1, description: "", name: "firm3", slug: "firm3", taxonomy: "tribe_events_cat", parent: 64, meta: [], url: "http://wordpress.rguc.co.uk/events/category/year3/firm3/", urls: { self: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/68", collection: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories", up: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/64" } }, { id: 60, count: 1, description: "", name: "year1", slug: "year1", taxonomy: "tribe_events_cat", parent: 0, meta: [], url: "http://wordpress.rguc.co.uk/events/category/year1/", urls: { self: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/60", collection: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories" } }, { id: 63, count: 1, description: "", name: "year2", slug: "year2", taxonomy: "tribe_events_cat", parent: 0, meta: [], url: "http://wordpress.rguc.co.uk/events/category/year2/", urls: { self: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/63", collection: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories" } }, { id: 64, count: 1, description: "", name: "year3", slug: "year3", taxonomy: "tribe_events_cat", parent: 0, meta: [], url: "http://wordpress.rguc.co.uk/events/category/year3/", urls: { self: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories/64", collection: "http://wordpress.rguc.co.uk/wp-json/tribe/events/v1/categories" } }] } };

// get sub and parent cats in their own array
const subCategories = action.data.categories.filter(
    category => category.parent > 0
);
const parentCategories = action.data.categories.filter(
    category => category.parent == 0
);

const categorys = parentCategories.map(({ id, name: label }) => ({
    id,
    label,
    options: subCategories
        .filter(({ parent }) => parent === id)
        .map(({ id, name }) => ({ id, name }))
 }));


console.log(categorys);

.as-console-wrapper { max-height: 100% !important; top: 0; }