反应:按组件中的值按多维数组对象分组

时间:2019-07-17 09:29:05

标签: javascript arrays reactjs react-native

如何按组件中的值对多维数组对象进行分组。

我需要按页排列数组,并获取每页的文本。我托盘使用地图并缩小但没有得到好的结果。我从事本机项目。 JS函数group by由于某种原因无法正常工作。

为此数组编写代码的最佳方法是什么。

我有这个数组:

{
        "number": 1,
        "englishName": "Name 1",
        "items": [
            {
                "text": "Some text",
                "page": 1,
            },
            {
                "text": "Some text",
                "page": 1,
            }
        ]
    },
    {
        "number": 2,
        "englishName": "Name 2",
        "items": [
            {
                "text": "Some text",
                "page": 2,
            },
            {
                "text": "Some text",
                "page": 2,
            }
        ]
    },
    {
        "number": 3,
        "englishName": "Name 3",
        "items": [
            {
                "text": "Some text",
                "page": 3,
            },
            {
                "text": "Some text",
                "page": 4,
            }
        ]
    }
]

我需要这样的数组

[
{
        "page 1": [
            {
                "text": "Some text",
                "englishName": "Name 1",
            },
            {
                "text": "Some text",
                "englishName": "Name 2",
            }
        ]
    },
    {
        "page 2": [
            {
                "text": "Some text",
                "englishName": "Name 2",
            },
            {
                "text": "Some text",
                "englishName": "Name 2",
            }
        ]
    },
    ...
]

1 个答案:

答案 0 :(得分:0)

似乎这样对您有用。

这将为您提供一个对象:

const allPages = array.reduce((acc, curr) => {
    curr.items.forEach((page) => {
        var pageKey = `page ${page.page}`
        if(!acc[pageKey]){
            acc[pageKey] = []
        }
        acc[pageKey].push({ text: page.text, englishName: curr.englishName })
    })
    return acc
}, {})

您也可以将该对象转换为数组:

const finalArr = Object.entries(allPages).map(([page, array]) => {
    return {
        [page]: array
    }
})

查看示例:

var array = [{
        "number": 1,
        "englishName": "Name 1",
        "items": [
            {
                "text": "Some text",
                "page": 1,
            },
            {
                "text": "Some text",
                "page": 1,
            }
        ]
    },
    {
        "number": 2,
        "englishName": "Name 2",
        "items": [
            {
                "text": "Some text",
                "page": 2,
            },
            {
                "text": "Some text",
                "page": 2,
            }
        ]
    },
    {
        "number": 3,
        "englishName": "Name 3",
        "items": [
            {
                "text": "Some text",
                "page": 3,
            },
            {
                "text": "Some text",
                "page": 4,
            }
        ]
    }
]



const allPages = array.reduce((acc, curr) => {
   curr.items.forEach((page) => {
   var pageKey = `page ${page.page}`
   if(!acc[pageKey]){
    	acc[pageKey] = []
   }
   acc[pageKey].push({ text: page.text, englishName: curr.englishName })
   })
    	return acc
}, {})
    
    
    
const finalArr = Object.entries(allPages).map(([page, array]) => {
    return {
    [page]: array
    }
})
    
    
console.log(allPages)
console.log(finalArr)