如何使用 javascript 将 API 数据转换为 react-native 中的部分列表数据

Posted 2023-02-16

【中文标题】如何使用 javascript 将 API 数据转换为 react-native 中的部分列表数据

【英文标题】：How to convert API data to section list data in react-native using javascript

【发布时间】：2020-10-04 11:29:05

【问题描述】：

我想将 API 数据转换为 react-native 中的部分列表格式。这样我就可以在部分列表中显示我的数据。以下是我的 API 数据

  data:[
    
      id:'1',
      fullname: "seela",
      inspection_date: "2020-06-10T04:45:32Z",
      issues: 1,
      response:
        shift_name:'Day'
      
    ,
    
      id:'2',
      fullname: "Raju vijayan",
      inspection_date: "2020-06-9T04:45:32Z",
      issues: 3,
      response:
        shift_name:'Afternoon'
      
    ,
    
      id:'3',
      fullname: "Pratap P",
      inspection_date: "2020-06-8T04:45:32Z",
      issues: 2,
      response:
        shift_name:'Afternoon'
      
    
  ]

我想转换为如下的部分列表格式。

data:[
  
    shift_name:'Day',
    data:[
    
      id:'1',
      fullname: "seela",
      inspection_date: "2020-06-10T04:45:32Z",
      issues: 1,
      response:
        shift_name:'Day'
      
     
    ]
  ,
  
    shift_name:'Afternoon',
    data:[
      
        id:'2',
        fullname: "Raju vijayan",
        inspection_date: "2020-06-9T04:45:32Z",
        issues: 3,
        response:
          shift_name:'Afternoon'
        
      ,
      
        id:'3',
        fullname: "Pratap P",
        inspection_date: "2020-06-8T04:45:32Z",
        issues: 2,
        response:
          shift_name:'Afternoon'
        
      
    ]
  
]

如何使用 array.map 或任何其他运算符将 API 数据转换为 react-native 中的部分列表

【参考方案1】：

你可以使用如下的 reducer 函数。

const data = [
    id: '1',
    fullname: "seela",
    inspection_date: "2020-06-10T04:45:32Z",
    issues: 1,
    response: 
      shift_name: 'Day'
    
  ,
  
    id: '2',
    fullname: "Raju vijayan",
    inspection_date: "2020-06-9T04:45:32Z",
    issues: 3,
    response: 
      shift_name: 'Afternoon'
    
  ,
  
    id: '3',
    fullname: "Pratap P",
    inspection_date: "2020-06-8T04:45:32Z",
    issues: 2,
    response: 
      shift_name: 'Afternoon'
    
  
];

const reducer = (acc, cur) => 
  const item = acc.find((x) => x.shift_name === cur.response.shift_name);
  if (item) 
    item.data.push(cur);
   else 
    acc.push(
      shift_name: cur.response.shift_name,
      data: [cur]
    );
  
  return acc;
;

console.log(data.reduce(reducer, []))