Как передать данные API в SectionList formate React Native

#react-native #api #react-native-sectionlist

#react-native #API #react-native-sectionlist

Вопрос:

Мне нужно показать имя пользователя, сгруппированное по папкам в react native.

API возвращает этот путь.

 [
{
    "id": 7,
    "url": "yyyy",
    "username": "user1@34.com",
    "dateupdate": "2020-12-18T22:23:01.000Z",
    "enable": 1,
    "folderid": 1,
    "descfolder": "Test Folder"
},
{
    "id": 6,
    "url": "xxxxx",
    "username": "user2@xxx.com",
    "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": "User5@amazon.com",
    "dateupdate": "2020-12-18T19:13:30.000Z",
    "enable": 1,
    "folderid": 3,
    "descfolder": "Folder2"
},
{
    "id": 5,
    "url": "YAHOO URL",
    "username": "User998@yahoo.com",
    "dateupdate": "2020-12-18T18:21:57.000Z",
    "enable": 1,
    "folderid": 2,
    "descfolder": "New folder"
}
 

]

Результат, который мне нужен, это

Тестовая папка
user1@34.com
user2@xxx.com
 
Folder2
 Teste 9997 
 User5@amazon.com
 
Новая папка
 User998@yahoo.com

Ответ №1:

Используя Lodash, вы можете сделать следующее:

 import _ from "lodash";

const array = [
  {
    id: 7,
    url: "yyyy",
    username: "user1@34.com",
    dateupdate: "2020-12-18T22:23:01.000Z",
    enable: 1,
    folderid: 1,
    descfolder: "Test Folder"
  },
  {
    id: 6,
    url: "xxxxx",
    username: "user2@xxx.com",
    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: "User5@amazon.com",
    dateupdate: "2020-12-18T19:13:30.000Z",
    enable: 1,
    folderid: 3,
    descfolder: "Folder2"
  },
  {
    id: 5,
    url: "YAHOO URL",
    username: "User998@yahoo.com",
    dateupdate: "2020-12-18T18:21:57.000Z",
    enable: 1,
    folderid: 2,
    descfolder: "New folder"
  }
];

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

Ответ будет:

 {
   "Test Folder":[
      {
         "id":7,
         "url":"yyyy",
         "username":"user1@34.com",
         "dateupdate":"2020-12-18T22:23:01.000Z",
         "enable":1,
         "folderid":1,
         "descfolder":"Test Folder"
      },
      {
         "id":6,
         "url":"xxxxx",
         "username":"user2@xxx.com",
         "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":"User5@amazon.com",
         "dateupdate":"2020-12-18T19:13:30.000Z",
         "enable":1,
         "folderid":3,
         "descfolder":"Folder2"
      }
   ],
   "New folder":[
      {
         "id":5,
         "url":"YAHOO URL",
         "username":"User998@yahoo.com",
         "dateupdate":"2020-12-18T18:21:57.000Z",
         "enable":1,
         "folderid":2,
         "descfolder":"New folder"
      }
   ]
}
 

Комментарии:

1. спасибо! но это не работает. Для списка разделов требуется [link’] reactnative.dev/docs/sectionlist [ссылка]

2. чтобы понравиться ссылка, которую я вам отправил. @Huzaima Khan