How to re-structure my complex Json response to display in SectionList React native

Question

I am receiving the following JSON from the server as a response:

[
   {
      "VehicleId":278,
      "VehicleName":"AhmedGMC",
      "VehicleStatus":"PARKED",
      "Latitude":29.178666,
      "Longitude":48.108431,
      "RecentCommunication":"2021-06-07T05:39:20",
      "CurrentSpeed":0.03,
      "VehicleType":"Car",
      "TheftMode":false,
      "DriverName":null,
      "OdometerReading":0.0,
      "IgnitionStatus":null,
      "Location":null,
      "LastUpdatedDate":"17 Jun, 2021",
      "LastUpdatedTime":"01:20 AM",
      "GroupName":"Otopulse",
      "SearchId":null,
      "SearchName":null
   },
   {
      "VehicleId":1715,
      "VehicleName":"Khalil",
      "VehicleStatus":"OFFLINE",
      "Latitude":29.2834194,
      "Longitude":47.9699033,
      "RecentCommunication":"2021-06-04T17:30:56",
      "CurrentSpeed":3.0,
      "VehicleType":"Car",
      "TheftMode":false,
      "DriverName":null,
      "OdometerReading":0.0,
      "IgnitionStatus":null,
      "Location":null,
      "LastUpdatedDate":"11 Jun, 2021",
      "LastUpdatedTime":"10:32 PM",
      "GroupName":"Unassigned",
      "SearchId":null,
      "SearchName":null
   },
   {
      "VehicleId":1697,
      "VehicleName":"Nazir test",
      "VehicleStatus":"OFFLINE",
      "Latitude":13.049452,
      "Longitude":80.2504663,
      "RecentCommunication":"2020-12-29T06:57:06",
      "CurrentSpeed":1.0,
      "VehicleType":"Car",
      "TheftMode":false,
      "DriverName":null,
      "OdometerReading":0.0,
      "IgnitionStatus":null,
      "Location":null,
      "LastUpdatedDate":"29 Dec, 2020",
      "LastUpdatedTime":"09:57 AM",
      "GroupName":"Unassigned",
      "SearchId":null,
      "SearchName":null
   }

I need to display it in a SectionList react-native in the following way:

The problem is that I am not able to prepare the input for the SectionList from the data displayed above. The response shown above is for only 3 automobiles and 2 groups: Otopulse and Unassigned, but sometimes I receive data of 50-60 cars, all of them divided into 8-10 groups. I know SectionList basics but I am not able to think of the logic to prepare/re-structure the above json for SectionList input. Any help is appreciated. Thanks in advance

Answer 1

You can group the array by key:

const sectionData = originalData.reduce((acc, item) => {
  if (acc.find(i => i.GroupName == item.GroupName)) {
    return acc.map(i => i.GroupName == item.GroupName ? {...i, data: [...i.data,item]} : i)
  } else {
    return [...acc,{ GroupName: item.GroupName, data: [item] }]
  }
},[]);

Then, your SectionList becomes something like:

<SectionList
        sections={sectionData}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <View><Text>{item.VehicleName} {item.LastUpdatedDate}</Text></View>}
        renderSectionHeader={({ section: { GroupName } }) => (
          <Text>{GroupName}</Text>
        )}
      />