Navigate back to the homepage

How to get data from json object in react native

Infinitbility
React Native
August 18th, 2021 · 1 min read
How to get data from json object in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial helps you to understand how to use objects and arrays to your react native code.

Today we take some JSON and array data and show their data one by one in React native also take some mixed JSON and array.

As we know, If we see data in {} ( curly brace ) then we called object and if see data In [] ( Square bracket ) then we called an array.

Table of content

  1. Object retrieve example
  2. Array retrieve example

Object retrieve example

Suppose, we have an object something like id name like below than how we can use in react native.

1{
2 id: 1,
3 name: "Taj Hotel",
4}

ObjectRetrieveExample.js

1import React, { Component } from "react";
2import { Button, Text, View } from "react-native";
3
4
5const data = {
6 id: 1,
7 name: "Taj Hotel",
8};
9
10class ObjectRetrieveExample extends Component {
11
12 render() {
13 return (
14 <View>
15 <Text>Hotel name: {data.name}</Text>
16 </View>
17 );
18 }
19}
20
21export default ObjectRetrieveExample;

Output

Object Retrieve Example

Array retrieve example

Suppose, we have an array of something like a list of names like below than how we can use in react native.

1const data = ["Infinite", "Ability", "Infinitbility"];

To show the array one by one we have to use loops.

ArrayRetrieveExample.js

1import React, { Component } from "react";
2import { Button, Text, View } from "react-native";
3
4
5const data = ["Infinite", "Ability", "Infinitbility"];
6
7
8class ArrayRetrieveExample extends Component {
9
10 render() {
11 return (
12 <View>
13
14
15 {
16 data.map((item) => (<View><Text>{item}</Text></View>))
17 }
18
19
20 <Text>{data[0]}</Text>
21 </View>
22 );
23 }
24}
25
26export default ArrayRetrieveExample;

You are able to access array, below two way actually it depends upon a situation which of example you have to use

Only want to show specific details

1{data[0]}

Want a show to each and every details

1{
2 data.map((item) => (<View><Text>{item}</Text></View>))
3}

Output

Array Retrieve Example

Thanks For Reading…

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.

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]

Tutorials

React Native

Categories

More articles from Infinitbility

How to map json data with array in react native

How to map json data with array in react native

React Native map json data with array Example

August 17th, 2021 · 1 min read
Password TextInput in react native

Password TextInput in react native

React Native Password TextInput Example

August 16th, 2021 · 1 min read
© 2020–2021 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]