I'm working on a little project which related to connecting API's on React Native. In that, I got a JSON data object like this.

{
  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',
      },
    },
  },
};

I wanted to display above data in a React Native picker in separately, like a Monthly Income in one picker & Height in another picker. I tried using map method to do that, but I couldn't access to the data inside this. My questions are,

• Can we use map method to access these kinds of JSON objects?
• If we can, what is the best way to do that?
• If can't, please suggest the way to do that work

CodePudding user response：

As Fernando suggests, transform object to array.

I build full working example for further details.

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",
  },
});

Expo Snack - https://snack.expo.dev/@emmbyiringiro/9b1520

CodePudding user response：

You need to turn this into an array to be able to map it.

Try something like:

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