基于React Native+AWS Amplify处理DynamoDB查询返回的JSON数据

嘿，很高兴你已经搞定了查询行数的问题！接下来处理返回的JSON其实不难，咱们一步步来拆解：

1. 先搞清楚Amplify返回的原始数据结构 #

Amplify查询DynamoDB后，返回的数据大概是这个样子的（给你举个实际例子）：

const queryResult = {
  items: [
    {
      hub_id: 'PnKVrm12',
      on_time: '2024-05-20T10:30:00',
      details: {
        "hub_id" : {"S" : "PnKVrm12"},
        "temperature" : {"S" : "23"},
        "sensor_name" : {"S" : "Tech Lab"}
      }
    }
  ]
};

这里要注意，details字段是DynamoDB的原生属性格式——每个值都带着类型标识（比如S代表字符串类型），咱们得把它转换成日常开发更易用的普通JSON格式。

2. 写个工具函数转换DynamoDB格式 #

你可以封装一个简单的函数，专门处理这种带类型标识的对象：

// 基础版：只处理字符串类型的属性
const convertDynamoDBItem = (ddbItem) => {
  const converted = {};
  Object.keys(ddbItem).forEach(key => {
    // 直接取出字符串类型的实际值
    converted[key] = ddbItem[key].S;
  });
  return converted;
};

如果你的传感器数据里还有数字、布尔值这类其他类型，可以扩展这个函数适配更多场景：

// 进阶版：支持多种DynamoDB数据类型
const convertDynamoDBItem = (ddbItem) => {
  const converted = {};
  Object.keys(ddbItem).forEach(key => {
    const valueObj = ddbItem[key];
    // 自动识别当前属性的类型
    const type = Object.keys(valueObj)[0];
    
    switch(type) {
      case 'S': // 字符串
        converted[key] = valueObj.S;
        break;
      case 'N': // 数字
        converted[key] = Number(valueObj.N);
        break;
      case 'BOOL': // 布尔值
        converted[key] = valueObj.BOOL;
        break;
      // 有其他类型（比如列表L、映射M）的话，按需添加处理逻辑
      default:
        converted[key] = valueObj[type];
    }
  });
  return converted;
};

3. 在React Native里处理查询结果 #

拿到Amplify的查询结果后，遍历items并转换details字段就行：

// 假设你用Amplify的API.graphql方法查询数据
const fetchSensorData = async () => {
  try {
    // 这里替换成你实际的查询语句
    const result = await API.graphql(graphqlOperation(listSensorData));
    
    // 批量处理所有返回的条目
    const processedData = result.data.listSensorData.items.map(item => ({
      // 保留原有字段，只转换details
      ...item,
      details: convertDynamoDBItem(item.details)
    }));
    
    // 现在processedData里的details就是普通JSON了，存到state里供组件渲染
    setSensorData(processedData);
  } catch (error) {
    console.error('查询数据失败:', error);
  }
};

4. 渲染处理后的数据 #

到这一步，你就可以在组件里直接用处理好的数据了，比如用FlatList展示：

return (
  <FlatList
    data={sensorData}
    keyExtractor={(item) => item.on_time}
    renderItem={({ item }) => (
      <View style={styles.itemCard}>
        <Text>Hub ID: {item.hub_id}</Text>
        <Text>采集时间: {item.on_time}</Text>
        <Text>温度: {item.details.temperature}°C</Text>
        <Text>传感器: {item.details.sensor_name}</Text>
      </View>
    )}
  />
);

额外小技巧：让Amplify自动转换格式 #

如果你的Amplify DataModel配置得当，其实可以省掉手动转换的步骤！检查一下你的schema.graphql文件，把details定义成JSON类型：

type SensorData @model {
  hub_id: ID! @primaryKey(sortKeyFields: ["on_time"])
  on_time: String!
  details: JSON # 用JSON类型代替原始DynamoDB格式
}

这样Amplify会自动帮你把DynamoDB的原生格式转换成普通JSON，查询回来直接就能用~

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