Navigate back to the homepage

How to get array from json object in react native?

Infinitbility
React Native
February 13th, 2022 · 1 min read
keep affilitate

Hello Friends 👋,

Welcome To Infinitbility! ❤️

Every time, we got an array in an object and we have to use arrays from objects.

Today, we will see how we will use an array from an object in React native.

In this tutorial, we will take the example of an object in an array of objects and we will iterate every row of arrays.

Let’s start Today’s tutorial How to get an array from JSON object in react native?

let’s assume we have the following response from API.

1{
2 status: 200,
3 users: [
4 { id: 1, name: 'infinitbility' },
5 { id: 2, name: 'notebility' },
6 { id: 3, name: 'repairbility' }
7 ]
8}

To create the above API response in typescript we have followed below code example of the API response interface.

1interface User {
2 id: number;
3 name: string;
4}
5
6interface Api {
7 status: number;
8 users: Array<User>;
9}
10
11let users: Array<User> = [
12 { id: 1, name: 'infinitbility' },
13 { id: 2, name: 'notebility' },
14 { id: 3, name: 'repairbility' },
15];
16
17let apiResponse: Api = {
18 status: 200,
19 users: users
20}

Now, we have the response of objects with contain array of objects let’s see how we can iterate the array.

If you also the following code to iterate API response first check API response and if OK status, use for loop to get rows.

1import React, { useState, useEffect } from 'react';
2import { Text, View, StyleSheet } from 'react-native';
3
4export default function App() {
5 const [users, setUsers] = useState([]);
6
7 useEffect(() => {
8 let users = [
9 { id: 1, name: 'infinitbility' },
10 { id: 2, name: 'notebility' },
11 { id: 2, name: 'repairbility' },
12 ];
13 setUsers(users);
14 }, []);
15
16 return (
17 <View style={styles.container}>
18
19 {users.map((user) => {
20 return (
21 <Text style={styles.paragraph}>{user.id} - {user.name}</Text>
22 )
23 })}
24
25 </View>
26 );
27}
28
29const styles = StyleSheet.create({
30 container: {
31 flex: 1,
32 justifyContent: 'center',
33 backgroundColor: '#ecf0f1',
34 padding: 8,
35 },
36 paragraph: {
37 margin: 24,
38 fontSize: 18,
39 fontWeight: 'bold',
40 textAlign: 'center',
41 },
42});

Output

react native, object, arrays, example
React Native, iterate object array example.

Here, i have used map() method to iterate array of objects.

  • Try it yourself

Thanks for reading…

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.

melio affilitate

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

How to get array index value in react native?

React Native, get array of element index value example.

February 11th, 2022 · 1 min read

How to get current time in react native?

React Native, get current time example.

February 11th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]