How to pass API data to SectionList formate React Native

Question

I need to show username grouped by folder in react native.

API return this way.

[
{
    "id": 7,
    "url": "yyyy",
    "username": "[email protected]",
    "dateupdate": "2020-12-18T22:23:01.000Z",
    "enable": 1,
    "folderid": 1,
    "descfolder": "Test Folder"
},
{
    "id": 6,
    "url": "xxxxx",
    "username": "[email protected]",
    "dateupdate": "2020-12-18T22:22:25.000Z",
    "enable": 1,
    "folderid": 1,
    "descfolder": "Test Folder"
},
{
    "id": 4,
    "url": "URL997",
    "username": "Teste 9997",
    "dateupdate": "2020-12-18T22:18:19.000Z",
    "enable": 1,
    "folderid": 3,
    "descfolder": "Folder2"
},
{
    "id": 1,
    "url": "AMAZON URL",
    "username": "[email protected]",
    "dateupdate": "2020-12-18T19:13:30.000Z",
    "enable": 1,
    "folderid": 3,
    "descfolder": "Folder2"
},
{
    "id": 5,
    "url": "YAHOO URL",
    "username": "[email protected]",
    "dateupdate": "2020-12-18T18:21:57.000Z",
    "enable": 1,
    "folderid": 2,
    "descfolder": "New folder"
}

]

The result that I need is

Test Folder
     [email protected]
     [email protected]
   
Folder2
     Teste 9997 
     [email protected]
    
New folder
     [email protected]

Answer 1

Using lodash, you can do the following:

import _ from "lodash";

const array = [
  {
    id: 7,
    url: "yyyy",
    username: "[email protected]",
    dateupdate: "2020-12-18T22:23:01.000Z",
    enable: 1,
    folderid: 1,
    descfolder: "Test Folder"
  },
  {
    id: 6,
    url: "xxxxx",
    username: "[email protected]",
    dateupdate: "2020-12-18T22:22:25.000Z",
    enable: 1,
    folderid: 1,
    descfolder: "Test Folder"
  },
  {
    id: 4,
    url: "URL997",
    username: "Teste 9997",
    dateupdate: "2020-12-18T22:18:19.000Z",
    enable: 1,
    folderid: 3,
    descfolder: "Folder2"
  },
  {
    id: 1,
    url: "AMAZON URL",
    username: "[email protected]",
    dateupdate: "2020-12-18T19:13:30.000Z",
    enable: 1,
    folderid: 3,
    descfolder: "Folder2"
  },
  {
    id: 5,
    url: "YAHOO URL",
    username: "[email protected]",
    dateupdate: "2020-12-18T18:21:57.000Z",
    enable: 1,
    folderid: 2,
    descfolder: "New folder"
  }
];

console.log(_.groupBy(array, "descfolder"));

The answer will be:

{
   "Test Folder":[
      {
         "id":7,
         "url":"yyyy",
         "username":"[email protected]",
         "dateupdate":"2020-12-18T22:23:01.000Z",
         "enable":1,
         "folderid":1,
         "descfolder":"Test Folder"
      },
      {
         "id":6,
         "url":"xxxxx",
         "username":"[email protected]",
         "dateupdate":"2020-12-18T22:22:25.000Z",
         "enable":1,
         "folderid":1,
         "descfolder":"Test Folder"
      }
   ],
   "Folder2":[
      {
         "id":4,
         "url":"URL997",
         "username":"Teste 9997",
         "dateupdate":"2020-12-18T22:18:19.000Z",
         "enable":1,
         "folderid":3,
         "descfolder":"Folder2"
      },
      {
         "id":1,
         "url":"AMAZON URL",
         "username":"[email protected]",
         "dateupdate":"2020-12-18T19:13:30.000Z",
         "enable":1,
         "folderid":3,
         "descfolder":"Folder2"
      }
   ],
   "New folder":[
      {
         "id":5,
         "url":"YAHOO URL",
         "username":"[email protected]",
         "dateupdate":"2020-12-18T18:21:57.000Z",
         "enable":1,
         "folderid":2,
         "descfolder":"New folder"
      }
   ]
}