JSON React Native 中的获取解析问题

Question

我目前正在尝试在 React Native 中迭代 json。 JSON 有可变数量的 returns，格式非常奇怪，不幸的是我不能做太多改变 JSON 的创建方式，所以我希望得到建议如何正确解析。

这是应该获取（）json 并显示值的代码：

import React, { useState, useEffect } from "react";
import { ActivityIndicator, FlatList, SafeAreaView, StatusBar, StyleSheet, Text, View, TouchableOpacity } from "react-native";

const App = () => {
  const [selectedId, setSelectedId] = useState(null);
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState({});
  const [counter, setCounter] = useState(0);

  const getJSON = async () => {
    const response = await fetch('URL');
    const json = await response.json();
    setData(json.Items);
    setCounter(json.Count);
    setLoading(false);
  }

  useEffect(() =>{
    getJSON();
  }, []);

  return (
    <View style={{ flex: 1, padding: 24 }}>
    {isLoading ? <ActivityIndicator/> : (
      <FlatList
        data={data}
        keyExtractor={({ Items }, index) => id}
        renderItem={({ item }) => (
          <Text>{item.Items}</Text>
        )}
      />
    )}
  </View>
  );
};

这是获取的 JSON():

{
    "Count": 1,
    "Items": [{
        "building": {
            "S": "Wash"
        },
        "mac": {
            "S": "FF:FF:FF:FF:FF:FF"
        },
        "name": {
            "S": "test asset"
        },
        "asset_id": {
            "S": "01"
        },
        "floor": {
            "S": "1"
        },
        "room": {
            "S": "102"
        }
    }],
    "ScannedCount": 1
}

如有任何帮助，我们将不胜感激。我对解析 JSONS

还是很陌生

Answer 1

我建议 pre-processing 将 Items 响应值转换为更有用的格式以进行呈现。您需要“解压”每个嵌套外键的嵌套 S 属性。然后，您可以更轻松地 map/access item 元素属性。

示例：

const { Items } = {
  Count: 1,
  Items: [
    {
      building: { S: "Wash" },
      mac: { S: "FF:FF:FF:FF:FF:FF" },
      name: { S: "test asset" },
      asset_id: { S: "01" },
      floor: { S: "1" },
      room: { S: "102" }
    },
  ],
  ScannedCount: 1
};

const data = Items.map((obj) =>
  Object.entries(obj).reduce((items, item) => {
    const [key, { S: value }] = item;
    return {
      ...items,
      [key]: value
    };
  }, {})
);

console.log(data);

代码：

function App() {
  const [selectedId, setSelectedId] = useState(null);
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const [counter, setCounter] = useState(0);

  const getJSON = async () => {
    const response = await fetch("URL");
    const json = await response.json();
    const { Count, Items } = json;

    const data = Items.map((obj) =>
      Object.entries(obj).reduce((items, item) => {
        const [key, { S: value }] = item;
        return {
          ...items,
          [key]: value
        };
      }, {})
    );

    setData(data);
    setCounter(Count);
    setLoading(false);
  };

  useEffect(() => {
    getJSON();
  }, []);

  return (
    <div className="App">
      {isLoading ? (
        <h2>Loading...</h2>
      ) : (
        <FlatList
          data={data}
          keyExtractor={({ asset_id }) => asset_id}
          renderItem={({ item }) => (
            <View key={item.asset_id}>
              <Text>
                Location: {item.building} {item.floor}-{item.room}
              </Text>
              <Text>Name: {item.name}</Text>
              <Text>MAC: {item.mac}</Text>
              <Text>Asset Id: {item.asset_id}</Text>
            </View>
          )}
        />
      )}
    </div>
  );
}

JSON React Native 中的获取解析问题

JSON Fetch Parsing Issues in React Native

reactjs

react-native

react-hooks