如何重新构建我的复杂 Json 响应以在 SectionList React native 中显示

Posted 2023-02-16

【中文标题】如何重新构建我的复杂 Json 响应以在 SectionList React native 中显示

【英文标题】：How to re-structure my complex Json response to display in SectionList React native

【发布时间】：2021-09-01 18:06:35

【问题描述】：

我从服务器收到以下 JSON 作为响应：

[
   
      "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
   

我需要通过以下方式在 SectionList react-native 中显示它：

问题是我无法从上面显示的数据中为 SectionList 准备输入。上面显示的响应仅针对 3 辆汽车和 2 组：Otopulse 和 Unassigned，但有时我会收到 50-60 辆汽车的数据，它们都分为 8-10 组。我知道 SectionList 基础知识，但我无法想到为 SectionList 输入准备/重新构建上述 json 的逻辑。任何帮助表示赞赏。提前致谢

【问题讨论】：

你能在你的问题中展示你是如何获得这些结果的吗？

先生，这个应用程序已经由以前的开发者在android和ios中准备好了。他们为我提供了 APK 和测试凭据。我必须准备准确的复制品。此屏幕来自旧应用程序。我无法理解这种逻辑

【参考方案1】：

您可以按键对数组进行分组：

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] ]
  
,[]);

然后，你的SectionList 变成这样：

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

【讨论】：

这就像一个魅力。非常感谢 JNPDX 先生。

很高兴它对你有用。如果您觉得有用，请随时用箭头点赞。