Hi Friends 👋,
Welcome To Infinitbility! ❤️
To get keys and values from a JSON array of objects in react native, use the map() to iterate and Object.keys() to get the keys of an object using both methods we are able to iterate and use keys and values of JSON array of objects.
Today, I’m going to show How do I get keys and values from a JSON array of objects in react native, here I will use the javascript map() and Object.keys() method to get keys and values from JSON array of objects.
Let’s start today’s tutorial How do you get keys and values from a JSON array of objects in react native?
Example in React Native
In the following example, we are going to do
- Take example JSON array of objects
- apply the
map()method to iterate the array. - apply
Object.keys()to get the key and value both from the object - Print on react native app screen
1import React, { useState, useEffect } from 'react';2import { Text, View, StyleSheet } from 'react-native';34export default function App() {5 const [domains, setDomains] = useState([]);67 useEffect(() => {8 let domains = [9 { id: 1, name: 'infinitbility.com' },10 { id: 2, name: 'aguidehub.com' },11 { id: 2, name: 'sortoutcode.com' },12 ];13 setDomains(domains);14 }, []);1516 return (17 <View style={styles.container}>18 {domains.map((user) => {19 let keys = Object.keys(user);20 return (21 <Text style={styles.paragraph}>{keys.map((key) => {22 return (23 <Text>{`Key ${key}, value ${user[key]} \n`}</Text>24 )25 })}</Text>26 )27 })}2829 </View>30 );31}3233const styles = StyleSheet.create({34 container: {35 flex: 1,36 justifyContent: 'center',37 backgroundColor: '#ecf0f1',38 padding: 8,39 },40 paragraph: {41 margin: 24,42 fontSize: 18,43 fontWeight: 'bold',44 textAlign: 'center',45 },46});
In the above program, we used the first map() method to iterate and the second map() method to iterate object keys it help us to get keys and values both from objects.
let’s check the output.
I hope it’s help you, All the best 👍.
Follow me on Twitter
Join our email list and get notified about new content
No worries, I respect your privacy and I will never abuse your email.
Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.
