React Native中如何解析API响应中的动态键值对

你可以通过以下步骤提取data对象中每个子项的employee_id和status：

1. 将API响应转为JavaScript对象 #

如果API返回的是JSON字符串，先通过JSON.parse()或请求库的内置方法（比如fetch的response.json()）转为JS对象。

2. 处理动态键的data对象 #

由于data的键是未知的动态值，我们可以用Object.values()方法直接提取data下的所有子对象，得到一个数组，再通过map筛选出需要的字段。

示例代码 #

// 假设apiResponse是解析后的API响应对象
const apiResponse = {
  "status": 1,
  "msg": "success",
  "data": {
    "118377742": {
      "gid": 118377742,
      "employee_id": 1,
      "status": "Present",
      "intime": "2022-09-24 10:42:50"
    },
    "118377785": {
      "gid": 118377785,
      "employee_id": 2,
      "status": "Present",
      "intime": "2022-09-24 09:50:59"
    },
    // 其他子对象...
  }
};

// 提取目标字段
const employeeStatusList = Object.values(apiResponse.data).map(item => ({
  employeeId: item.employee_id,
  status: item.status
}));

// 输出结果：[{employeeId:1, status:"Present"}, {employeeId:2, status:"Present"}, ...]
console.log(employeeStatusList);

3. 边界情况处理 #

如果部分子对象可能缺失employee_id或status，可以用可选链和空值合并操作符避免报错：

const employeeStatusList = Object.values(apiResponse.data).map(item => ({
  employeeId: item?.employee_id ?? '未知ID',
  status: item?.status ?? '未知状态'
}));

在React Native请求流程中使用 #

结合fetch请求的完整示例：

import { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const EmployeeStatusScreen = () => {
  const [employeeList, setEmployeeList] = useState([]);

  useEffect(() => {
    fetch('你的API接口地址')
      .then(response => response.json())
      .then(apiResponse => {
        if (apiResponse.status === 1 && apiResponse.msg === 'success') {
          const list = Object.values(apiResponse.data).map(item => ({
            employeeId: item.employee_id,
            status: item.status
          }));
          setEmployeeList(list);
        }
      })
      .catch(err => console.log('请求失败:', err));
  }, []);

  return (
    <View>
      {employeeList.map((item, index) => (
        <Text key={index}>员工ID: {item.employeeId} - 状态: {item.status}</Text>
      ))}
    </View>
  );
};

export default EmployeeStatusScreen;

内容的提问来源于stack exchange，提问作者Vishali