在 React Native 中显示 JSON 个数据对象

Question

我正在做一个与在 React Native 上连接 API 相关的小项目。在那里，我得到了一个像这样的 JSON 数据对象。

{
  success: 1,
  data: {
    monthly_income: {
      0: {
        en: 'Below Ten Thousand',
        expect_en: 'Neglected',
      },
      10000: {
        en: 'Above Ten Thousand',
      },
      25000: {
        en: 'Above Twenty Thousand',
      },
      50000: {
        en: 'Above Fifty Thousand',
      },
      75000: {
        en: 'Above Seventy Five Thousand',
      },
      100000: {
        en: 'Above Hundred Thousand',
      },
    },
    height: {
      5: {
        en: '5 Feet',
      },
      5.1: {
        en: '5 Feet and 1 Inches',
      },
      5.2: {
        en: '5 Feet and 2 Inches',
      },
      5.3: {
        en: '5 Feet and 3 Inches',
      },
      5.4: {
        en: '5 Feet and 4 Inches',
      },
      5.5: {
        en: '5 Feet and 5 Inches',
      },
      5.6: {
        en: '5 Feet and 6 Inches',
      },
      5.7: {
        en: '5 Feet and 7 Inches',
      },
      5.8: {
        en: '5 Feet and 8 Inches',
      },
      5.9: {
        en: '5 Feet and 9 Inches',
      },
      '5.10': {
        en: '5 Feet and 10 Inches',
      },
      5.11: {
        en: '5 Feet and 11 Inches',
      },
      6: {
        en: '6 Feet',
      },
    },
  },
};

我想在 React Native 选择器中单独显示以上数据，例如一个选择器中的月收入和另一个选择器中的身高。我尝试使用 map 方法来做到这一点，但我无法访问其中的数据。我的问题是，

我们可以使用 map 方法访问这些 JSON 对象吗？
如果可以，最好的方法是什么？
如果不能，请提出完成这项工作的方法

Answer 1

你需要把它变成一个数组才能映射它。

试试这样的：

{Object.keys(JSON_NAME.data.monthly_income).map((key) => {
  return <Text>JSON_NAME.data.monthly_Income[key] </Text>
})}

Answer 2

按照 Fernando 的建议，将对象转换为数组。

我构建了完整的工作示例以获取更多详细信息。

import * as React from "react";
import { Text, View, StyleSheet } from "react-native";
import Constants from "expo-constants";
import { Picker } from "@react-native-picker/picker";

// You can import from local files
import AssetExample from "./components/AssetExample";

// or any pure javascript modules available in npm
import { Card } from "react-native-paper";
import response from "./response";

const getMonthlyIncomes = (response) => {
  let monthlyIncomes = response.data.monthly_income;

  const keys = Object.keys(monthlyIncomes);

  return keys.map((key) => {
    let incomeData = monthlyIncomes[key];

    return { value: key, ...incomeData };
  });
};

const getHeights = (response) => {
  let heights = response.data.height;

  const keys = Object.keys(heights);

  return keys.map((key) => {
    let heightData = heights[key];

    return { value: key, ...heightData };
  });
};

const monthlyIncomes = getMonthlyIncomes(response);
const heights = getHeights(response);

export default function App() {
  return (
    <View style={styles.container}>
      <Card>
        <View style={{ padding: 20 }}>
          <Text style={styles.paragraph}>Monthly Income</Text>
          <Picker>
            {monthlyIncomes.map((income) => {
              return (
                <Picker.Item
                  key={income.value}
                  label={income.en}
                  value={income.value}
                />
              );
            })}
          </Picker>
        </View>
      </Card>

      {/** Heights */}

      <Card style={{ marginTop: 20 }}>
        <View style={{ padding: 20 }}>
          <Text style={styles.paragraph}>Heights</Text>
          <Picker>
            {heights.map((height) => {
              return (
                <Picker.Item
                  key={height.value}
                  label={height.en}
                  value={height.value}
                />
              );
            })}
          </Picker>
        </View>
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
  },
});

博览会小吃 - https://snack.expo.dev/@emmbyiringiro/9b1520

在 React Native 中显示 JSON 个数据对象

Show JSON data objects in React Native

arrays

json

picker

reactjs

react-native