React：按组件中的值按多维数组对象分组

Question

How to group multidimensional array objects by value in the component.

I need to group array by page and get the text for every page. I tray to use the map and reduce it but don't get good results. I work on react-native project. JS function groups doesn't work for some reason.

What is the best way to write code for this array?

I have this 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,
      },
    ],
  },
]

I need an array like this

[
  {
    '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',
      },
    ],
  },
  ....
]

Answer 1

Seems like this will work for you.

This will give you an object:

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

You can convert that object into an array as well:

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

See example:

 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)