Navigate back to the homepage

how to convert string to json in react native?

Infinitbility
React Native
June 22nd, 2022 · 1 min read

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To convert a string to JSON in react native, just use the JSON.parse() method it will return a JSON object based on the string.

Like the following example, we can convert strings to JSON objects, and also we can use their property.

convert object string to json object

1const jsonStr = '{"name":"Infinitbility","gender":"male"}';
2const jsonObj = JSON.parse(jsonStr);
3console.log(jsonObj); // {name: 'Infinitbility', gender: 'male'}
4console.log(jsonObj.name); // Infinitbility

convert array of object string to json array of object

1const jsonStr = '[{"name":"Infinitbility","gender":"male"}]';
2const jsonObj = JSON.parse(jsonStr);
3console.log(jsonObj); // [0: {name: 'Infinitbility', gender: 'male'}]
4console.log(jsonObj[0].name); // Infinitbility

Today, I’m going to show you How do i convert string to JSON react native, as above mentioned here, I’m going to use the JSON.parse() method to convert string to JSON.

Let’s start today’s tutorial how do you convert string to JSON react native?

In this example, we will do

  1. Create a sample JSON string variable.
  2. Use JSON.parse() method to convert string to JSON
  3. Print the Output on the screen
1import React, { useState, useEffect } from 'react';
2import { Text, View, StyleSheet } from 'react-native';
3
4export default function App() {
5 const [jsonObj, setJsonObj] = useState(null);
6
7 useEffect(() => {
8 const str = '{"name":"Infinitbility","gender":"male"}';
9 const result = JSON.parse(str);
10 console.log(result); // {name: 'Infinitbility', gender: 'male'}
11 setJsonObj(result);
12 }, []);
13
14 return (
15 <View style={styles.container}>
16 {jsonObj && (
17 <>
18 <Text>{'Name => ' + jsonObj.name}</Text>
19 <Text>{'Gender => ' + jsonObj.gender}</Text>
20 </>
21 )}
22
23 </View>
24 );
25}
26
27const styles = StyleSheet.create({
28 container: {
29 flex: 1,
30 justifyContent: 'center',
31 backgroundColor: '#ecf0f1',
32 padding: 8,
33 },
34 paragraph: {
35 margin: 24,
36 fontSize: 18,
37 fontWeight: 'bold',
38 textAlign: 'center',
39 },
40});

As above mentioned, we are taken the example of a JSON string variable, convert it into a JSON object, and printed it on the screen.

Let’s check the output.

React Native, convert string to json example
React Native, convert string to json example
  • Try it yourself

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.

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 return a string from function in react native?

An example of use returns a string from a function in react native with step by step guide.

June 22nd, 2022 · 1 min read

how to convert boolean to string in react native?

Example of to convert boolean to string react native with step by step guide.

June 21st, 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]